【移動端】基於rem實現手機端頁面自適應--動態改變dpr和font-size
阿新 • • 發佈:2018-12-23
這兩天還是在寫手機端的那個表單頁面,我好苦惱啊。明明在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 。
問題最終還是沒有完美解決,繼續研究。