在网页中设置的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; 620px; } @-ms-viewport { 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>
”