這兩天還是在寫手機端的那個表單頁面，我好苦惱啊。明明在chrome上除錯的時候都是可以的，但是真的用手機去掃碼看的時候，就出現問題了。
蘋果手機麼有問題，都是根據dpr來設定meta標籤，動態設定font-size，顯示的跟預期的一樣。用三星手機掃也是可以的，但是當我用小米4掃的時候，就有問題了。表單寬度和高度都有所縮小，內容顯示不全。
我搜了一下，網上有說 米4的dpr也是3.
於是我就自己寫js，想通過自己寫來實現不同解析度的適配，思路是這樣的:

如果是蘋果手機，scale = 1/dpr;font-size = deviceWidth * dpr /10
如果是安卓手機，則dpr = 1；

程式碼如下

var deviceWidth = document.documentElement.clientWidth;//裝置css畫素寬
var isIPhone = window.navigator.appVersion.match(/iPhone/gi);//判斷裝置是不是iPhone
if (isIPhone) {
    alert("iPhone");
    dpr = window.devicePixelRatio;
    width = deviceWidth * dpr;
    scale = 1/dpr;
    fontSize = width/10;    
    window
 
.document.documentElement.style.fontSize = fontSize + 'px';
}else {
    alert("andrio")
    scale = 1;
    fontSize = deviceWidth/10;
    dpr = 1 ;
    window.document.documentElement.style.fontSize = fontSize + 'px';
}
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='
 
 + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
var docEl = window.document.documentElement;
docEl.setAttribute('data-dpr', dpr);

其實思路跟淘寶的flexible是一樣的。我想通過var isIPhone = window.navigator.appVersion.match(/iPhone/gi); 來判斷裝置是不是蘋果裝置。

奇怪的是，我用米4掃的時候，竟然彈出框也是顯示iPhone 。

反覆寫反覆寫，今天的收穫就是，window.navigator.appVersion 可以知道裝置是不是蘋果手機；
document.documentElement.clientWidth 可以獲得裝置寬度；
window.devicePixelRatio;可以獲得裝置dpr 。

問題最終還是沒有完美解決，繼續研究。