移動端H5頁面自適應手機屏幕寬度

1.因爲本人使用的是sublime.text，使用rem就能夠達到效果。

點擊菜單中的preferences下的browse packages，選擇cssrem-master，添加或者編寫cssrem.sublime-settings文件。

設置px_to_rem的值爲75便可。

在代碼裏輸入設置的對應px值，按TAB鍵就能夠轉換爲rem

 

在使用時，同事引用flexible.js文件

2.<meta name="apple-mobile-web-app-capable" content="yes">

下面（）裏的不用

（使用meta標籤，這也是廣泛使用的方法，理論上講使用這個標籤是能夠適應全部尺寸的屏幕的，可是各設備對該標籤的解釋方式及支持程度不一樣形成了不能兼容全部瀏覽器或系統。

首先解釋該標籤的含義：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

若是你徹底不瞭解這個標籤的使用須要先百度一下。

解釋：content中的「width」 這個width指的是什麼寬度，我看過的文章對這個都沒有解釋的很清楚，有幾個備選：虛擬窗口的寬度、手機屏幕的寬度、仍是頁面的寬度等等？經試驗這個指的是虛擬窗口的寬度。瞭解寬度以後，對後續的各類scale，就應該知道是誰與誰的比例，是 虛擬窗口寬度 / 頁面寬度，這樣就會有問題出現安卓設備尺寸差別很大光主流的就有寬度爲 320 480 720 1080 等各類尺寸而以上標籤只能支持一種尺寸，固然有些瀏覽器會自動縮放使其適應屏幕，但這不是統一標準，正確的作法是用js動態生成此標籤，固然，應該先獲取屏幕尺寸。）

<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>

3.微信分享要引用的<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

4.使用媒體查詢功能   好比兼容iphone的樣式 @media only screen and (min-device-width : 320px) and (max-device-height : 460px){}

作到以上幾點，基本的自適應就能夠了