關於移動端設備適配的問題

時間 2019-11-29

標籤關於移動設備適配問題欄目無線简体版

原文原文鏈接

　　對於移動端開發來講設備適配問題當然很重要，爲了兼容在不一樣分辨率的狀況下的顯示問題你，博主寫了一部分代碼用於幫助你們更加方便的解決移動端開發設備適配問題，廢話很少說，直接上代碼（我怎麼老被上(┬＿┬)）javascript

在HTML中先作基礎的編輯：css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 6     <meta name="format-detection" content="telephone=no"/>
 7     <meta name="apple-mobile-web-app-capable" content="yes"/>
 8     <meta name="apple-touch-fullscreen" content="yes"/>
 9     <title>Hellow Word</title>
10     <style type="text/css">
11         html,body{
12             height:100%;
13         }
14         body{
15             margin:0;
16         }
17     </style>
18 </head>
19 <body>
20 
21 </body>
22 </html>

　　以上這部分代碼都很常見，想省事的童鞋能夠直接ctrl+chtml

　　至於想知道所使用的meat都是什麼功能能夠搜索一下，大神們講的都很詳細，我就不在此解釋獻醜了^_^java

　　要想作到設備適配光這一些代碼確定是不行，一般都會使用css3新定義的rem來控制，重點來了css3

JS部分：web

1 <script type="text/javascript">
2         var html = document.documentElement;
3         var designWidth = 667;
4         var deviceWidth = html.clientWidth;
5         html.style.fontSize = deviceWidth *100/ designWidth +"px";
6 </script>