前端開發中，尤其移動端手機屏幕大小各異，該如何解決頁面適配的問題呢？下面從幾點進行了總結。

1、設計稿的布局設計

　　我們在進行H5頁面內容規劃布局設計的時候，不能把重要的內容放在太偏下的位置或者偏上，否則前端布局時可能出現內容顯示不全的情況。

除去將瀏覽器全屏顯示的情況，幾乎所有的情況都會有頂部的狀態欄和導航欄。

　　iphone的設計標準，狀態欄和導航欄的獨立像素高度分別為40px和88px。

　　由于安卓系統可以更改狀態欄和導航欄的高度，這里可以取默認值為48px和100px。

　　那么就會把網頁內容往下擠，進入盲區（根據不同的布局方式可能擠出視口，即可視區域之下）取這兩個系統者的最大值為148，設計稿要盡量保證單頁下面148px沒有重要內容。

　　那么在所有屏幕大小上把重要內容顯示完全，就要注意市面上存在的小尺寸手機屏幕，現在絕大部分智能手機分辨率都在640*960px（iphone4分辨率）之上，所以只要把重要內容放在盲區之上即可，計算后的最安全高度為812（960-148=812）。

　　在此總結，一般情況下，以現有市場上流行的移動智能手機，單頁翻轉（非延伸向下的長頁面）設計稿尺寸為640*1136，在高度為812處設置一條安全線（參考線），將重要的內容布局在這條安全線之上。

2、相對單位rem的使用

　　 手機頁面設計一般的大小是640，但是手機屏幕大小不確定，那么怎樣才能做出適應所有手機的手機頁面呢？

　　一般的解決方案有兩種，rem布局和百分比布局，我更推薦用rem布局來制作手機頁面

　　rem布局的兼容性：

　　Mozilla Firefox 3.6+ ，Apple Safari 5+，Google Chrome ，IE9+和Opera11+

　　IE6-8還是別用rem了，不過在手機端，可以忽略ie內核這個問題。

　　rem的計算公式

　　例：html設置font-size：16px ，1rem=16px

　　最核心的代碼就是這一段js運算了，根據頁面的大小來控制基礎rem的值，以下代碼基于jquery：

　　

//jq
var windowW = $(window).width(); var ratio = windowW/640; $("html").css("fontSize",100*ratio+"px"); $(window).on("resize",function(){var windowW = $(window).width();var ratio = windowW/640;$("html").css("fontSize",100*ratio+"px"); });


? //js function cal(){var windowW =document.documentElement.clientWidth||document.body.clientWidth;var ratio = windowW/640;if(windowW>640){document.getElementsByTagName("html")[0].style.fontSize="100px";}else{document.getElementsByTagName("html")[0].style.fontSize=100*ratio+"px";} } cal(); window.onresize = function(){cal(); }

?

ps：附上移動端的判斷，可實現判斷瀏覽器為移動端時，自動跳轉到手機版頁面鏈接

<script type="text/javascript">(function() {
　　 var is_iPd = navigator.userAgent.match(/(iPad|iPod|iPhone)/i) != null;
　　var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null;
　　if(is_mobi && window.location.search.indexOf("mv=fp")<0){
　　　　javascript:window.location.href="/wap";
　　}
})

</script>

?

　　

轉載于:https://www.cnblogs.com/sherry-long/p/5999791.html

總結

以上是生活随笔為你收集整理的移动端页面适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。