• 如何根据浏览器的大小来显示不同的页面布局?(自适应PC和APP)
  • 发布于 2个月前
  • 193 热度
    3 评论
  • 核桃酥
  • 3 粉丝 36 篇博客
  •   

现在很多网站的这种自适应功能是怎么实现的?

1.当页面用电脑正常打开时,显示的是电脑版的布局

2.当把浏览器的大小调整为和手机屏幕差不多大小时,系统的布局又变为适应手机的布局(左侧的菜单栏没了)

用户评论
  • 一线码农
  • 给你一段简单的代码样例,你可以根据这个基本思路去自己实现

    function parseUA() {
                var u = navigator.userAgent;
                var u2 = navigator.userAgent.toLowerCase();
                return { //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
                    iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
                    weixin: u2.match(/MicroMessenger/i) == "micromessenger",
                    ali: u.indexOf('AliApp') > -1,
                };
            }
            var ua = parseUA();
        //跳到pc页面
            if (!ua.mobile) {
                location.href = './pc.html';
            }
    
    

  • 2018/6/11 13:51:00 [ 0 ] [ 0 ] 回复
  • 十里桃花
  • 很多情况下,一个应用会有PC和移动端两个版本,而这两个版本因为差别大,内容多,所以不能用响应式开发但是单独开发,而域名只有一个,用户进入域后直接返回对应设备的应用,做法主要有两种:
    1.前端判断并跳转
    进入一个应用或者一个空白页面后,通过navigator.userAgent来判断用户访问的设备类型,进行跳转
    2.后端判断并响应对应的应用
    用户地址栏进入域的时候,服务器能接收到请求头上包含的userAgent信息,判断之后返回对应应用
  • 2018/6/11 13:48:00 [ 0 ] [ 0 ] 回复
  • 毛佩琪
  • 你可以自己用js写一个代码判断当前打开的浏览器是属于PC端打开还是移动端打开的,然后根据用户打开的客户端去判断该显示电脑版的页面还是APP版的页面

    js判断客户端类型的代码:

    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

  • 2018/6/11 13:45:00 [ 0 ] [ 0 ] 回复