码迷,mamicode.com
首页 > 其他好文 > 详细

h5适配之viewport

时间:2018-11-23 14:19:28      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:解决问题   1.0   settings   关于   scala   页面   安卓   并且   scree   

前言:

  最近自己写的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做下兼容啊!
 
  最后,以上只是我的个人理解,有问题大家多多指正,谢谢!
 

h5适配之viewport

标签:解决问题   1.0   settings   关于   scala   页面   安卓   并且   scree   

原文地址:https://www.cnblogs.com/Lihuans/p/10006805.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!