织梦CMS - 轻松建站从此开始!

沙龙网上娱乐_沙龙国际网上娱乐_沙龙国际官方网上娱乐

当前位置: 主页 > salon365 >

移动端适配与不适配方案探讨

时间:2017-07-18 02:14来源:未知 作者:admin 点击:
方案一: JS 定宽,改变缩放值 Viewport 方式定宽 Html字体设置为100px; body给个max-width 判断低版本浏览器 优势:直接根据设计图出稿,简单出暴; 缺点:不能1:1像素还原等等 1:JS 定宽,

方案一:
JS 定宽,改变缩放值
Viewport 方式定宽
Html字体设置为100px;
body给个max-width
判断低版本浏览器
优势:直接根据设计图出稿,简单出暴;
缺点:不能1:1像素还原等等

1:JS 定宽,改变缩放值
    function ScaleW(){
        var w=window.screen.width;
        var targetW=640;
        var scale=w/targetW;
        var meta=document.createElement('meta');
        meta.name='viewport';
        meta.content='initial-scale=' scale ',maximum-scale=' scale ', user-scalable=no';
        document.head.appendChild(meta);
    }
    ScaleW();
    window.addEventListener("resize",ScaleW,false);
2:Viewport 方式定宽
meta vieportcontent=" width=640,user-scalable=no" 

方案二:
手淘的Flexible的方案;
优势:1:1像素还原等其它公认的
缺点:个人在chrome模拟器下浏览,会感觉跟设计图有偏差,这个偏差是指设计图是是按照640的宽度设计,因为做了像素还原,所以看起来有点变扭

不知道大家都是用哪种方案的?

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容