jsp頁面在 移動端 自適應,chrome瀏覽器沒問題,可是safari瀏覽器有問題的解決方法
阿新 • • 發佈:2017-07-29
ref orm one 方法 viewport 轉載 min maximum 顯示
在網頁中設置的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>
”
轉載:http://blog.csdn.net/aminfo/article/details/40895211
jsp頁面在 移動端 自適應,chrome瀏覽器沒問題,可是safari瀏覽器有問題的解決方法