h5适配之viewport

前言：

　　最近自己写的wap老项目要嵌入别人家的app里，然后就OMG的了，适配出了问题，网页上一切正常的，自家app也没问题，咋个嵌入app就出问题了？于是陷入了深思。。。

　　以前为了遵循设计稿（750），用了祖传代码：

(function () {
    var phoneWidth = parseInt(window.screen.width); //375...
    var phoneScale = phoneWidth / 750;
    var ua = navigator.userAgent;
    var deviceWidth = 750; //可视区域的宽度
    // var deviceWidth = 'device-width';

    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            // andriod 2.3
            document.write('<meta name="viewport" content="width='+ deviceWidth +',initial-scale= ' + phoneScale + ', minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            // andriod 2.3
            document.write('<meta name="viewport" content="width='+ deviceWidth +', target-densitydpi=device-dpi">');
        }
        // IOS
    } else {
        document.write('<meta name="viewport" content="width='+ deviceWidth +', user-scalable=no">');
    }
})();

注：一下所有关于像素的计算都是以iphone6(375px)为例，帮助理解

其实很好用，但是嵌入别人家app就有问题，然后第三方的APP咋个调试呢！！！于是开始了乱试阶段，把deviceWidth改为'device-width'，然后各种尝试都有问题，最终决定还是研究透彻原因再解决问题

先到网上搜索了相关meta name="viewport" content="width=device-width,initial-scale=1.0" 解释，链接地址：https://www.cnblogs.com/yelongsan/p/7975580.html

content属性值 :

width:可视区域的宽度，值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

了解了一番后还是只是了解了，还是不晓得啥子原因，于是求助咋们Android与ios，发现咋们是的app对于webwiew是做了配置的，

Android：webSettings.setUseWideViewPort(true); //这里需要设置为true，才能让Webivew支持<meta>标签的viewport属性（so understand）

ios:_webView.scalesPageToFit=YES;

于是微信上问了他们是否设置了该值，结果果然是设置为false，这下是找到原因了：

　　Android如果把setUseWideViewPort设置为false,就不会用到我的viewport，那么webview应该默认的viewport是meta name="viewport" content="width=device-width,initial-scale=1.0" ，但是我的所有样式都是以设计稿750为准写的像素，意思就是比如ihone6，device-width就是375，也就是说可视区域的宽度为375，但是我写的css样式宽750px（100%宽）的缩放比例为1（就是不缩放），那么就会在视图中看到我的样式全是两倍大小，因为可视区域375，而我写的是750的并且没缩放。

　　ios的scalesPageToFit

　　默认情况下UIWebView加载HTML页面后，会以页面的原始大小进行显示，亦即如果页面的大小超出UIWebView视口大小，UIWebView会出现滚动效果，而且用户只能通过滚动页面来查看不同区域的内容，不能使用手指的捏合手势来放大或缩小页面，设置scalesPageToFit为yes之后，缩放HTML页面来适配其视口大小，从而达到整屏显示内容的效果，并且用户可以用捏合动作来放大或缩小页面来查看内容。所以ios我没有设置scale模式，因为一般浏览器会自己算，但是如果app的scalesPageToFit没设置或者设置为no的话，就不会计算scale,从而导致页面也显示两倍大小，而安卓并不会自己算，所以在代码里实现设置了

　　那么到这里scale是明白了，但是width与scale之间的关联是什么呢，我试了试在APP兼容的情况下，width设置为750与device-width的区别:

　　　　width设置为750 可以达到各个端的完美适配（即把width设置为750px可以达到各个端宽度100%的效果），而device-width并不可以，这是为什么呢？

　　首先ios自己能算的前提就是我们设置的width,这个width就相当于我上面算phoneScale的分母;如果是device-width（375），那么scale就为1，导致ios页面不缩放，视图上会感觉两倍大（这里仅针对iphone6,其他机型根据device-width不同，scale也不同）

　　而针对于Android，没啥区别，毕竟phoneScale是自己代码算的，只是在https://www.cnblogs.com/yelongsan/p/7975580.html里有提到

　　另外如果app不做兼容，咋个办，就只<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">，然后所有css文件的像素乘以0.5了,这种方案不能完全适配，还需结合百分比进行适配，因为理论上只有375的设备才是所有样式乘以0.5，其他的一些设备可能算下来是的scale可能是0.48或者0.56之类的，只是算下来相差不大，所以视图上感觉没什么问题。但是平板上问题就出来了，样式就会非常小，可以让pad跳pc站。要不然终极解决方案就是用rem,但是改动就更大了。所以还是需要app做下兼容啊！

　　最后，以上只是我的个人理解，有问题大家多多指正，谢谢！

猜你喜欢