360SDN.COM

手机上显示网页自适应大小viewport参数设置

来源:  2017-08-29 14:11:12    评论:0点击:

传统用以下代码设置网页自适应屏幕大小
    <meta name="viewport" content="width=device-width"> 

由于网页中有图片,如果按这样设置,图片有的竟然会显示不了,在不同的手机浏览器上,显示结果竟然不一样,在找遍相关资料如下:

相关资料参考网址:

http://www.xiaocaoge.com/understanding-viewport-and-device-width.html

http://www.cnblogs.com/2050/p/3877280.html

http://blog.csdn.NET/aminfo/article/details/40895211

大概的原因明白了,在网页中设置的1px与物理像素中的1px不会相同,所以导致不同在不同手机上显示结果都不相同,通过以下设置找到了适合当前网页自适应不同手机、不同浏览器的办法,代码如下:

    <meta name="viewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1" /> 

其中的width=620px就是网页内容区需要的最小宽度,需要在不同手机上刚好全屏显示,target-densitydpi=device-dpi设置后,css中的1px就会等于物理像素中的1px。

 

补充:由于safari浏览器不支持target-densitydpi=device-dpi,所以加入js代码自动调整缩放比例,调整后的代码:

    <style type="text/css">  
    @viewport  
    {  
        zoom: 1.0;  
        width: 620px;  
    }  
    @-ms-viewport  
    {  
        width: 620px;  
        zoom: 1.0;  
    }</style>  
    <meta name="viewport" id="WebViewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <meta name="format-detection" content="telephone=no">  
    <script language="javascript">  
    if(screen.width<620)  
    {  
        document.getElementById('WebViewport').setAttribute('content', 'width=620px,initial-scale=' + screen.width / 620 + ',target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1');  
    }  
    </script> 


 


为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权