(function (doc, win) ;
// abort if browser does not support addeventlistener
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
// 一物理畫素在不同螢幕的顯示效果不一樣。要根據devicepixelratio來修改meta標籤的scale,要注釋上面的meta標籤
(function() else if (devicepixelratio >= 2) else
} else
scale = 1 / dpr;
//var metael = "";
metael = doc.createelement('meta');
metael.setattribute('name', 'viewport');
metael.setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docel.firstelementchild) else
})();
})(document, window);
另外我們頁面載入的時候經常會出現一種情況。為了適配，我們一般都會給html新增乙個font-size:100px;的樣式，這樣的目的是在適配的時候，好計算出每乙個標籤的大小。這也導致了乙個問題，就是每次進入頁面的時候，所有標籤都會特別大，等所有東西載入完成的時候，頁面才能正常顯示，這樣的使用者體檢肯定是不好的，為了解決這個問題，我們可以在js檔案中寫上以下一段**：
//獲取瀏覽器頁面可見高度和寬度
var _pageheight = document.documentelement.clientheight,
_pagewidth = document.documentelement.clientwidth;
//計算loading框距離頂部和左部的距離（loading框的寬度為215px，高度為61px）
var _loadingtop = _pageheight > 61 ? (_pageheight - 61) / 2 : 0,
_loadingleft = _pagewidth > 215 ? (_pagewidth - 215) / 2 : 0;
//載入gif位址
var loadimagerul = "/content/loadjs/image/loading.gif";
//在頁面未載入完畢之前顯示的loading html自定義內容
var _loadinghtml = '玩命載入中...
';//呈現loading效果
document.write(_loadinghtml);
//監聽載入狀態改變
document.onreadystatechange = completeloading;
//載入狀態為complete時移除loading效果
function completeloading()
}
然後在head中引用這個js檔案，然後就會在所有css檔案載入完之後，標籤和樣式才渲染到頁面中。這樣。頁面的顯示也就正常了。
移動端適配JS和CSS
移動端適配一般是兩種方式 一js方式 setrem window.addeventlistener orientationchange setrem window.addeventlistener resize setrem function setrem js方式書寫方便，而且適配所有的機型，但是...
移動端適配
js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...
移動端適配
不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...