如何讓網頁大小自適應的JS程式碼
阿新 • • 發佈:2019-02-04
其原理是比較簡單的,也就是根據當前視口的大小自動計算跟元素的fontSize值:
! function(a) { function b() { //為window物件添加了rem屬性,其值為document.documentElement的寬度的1/16! //同時把他設定為document.documentElement的fontSize屬性,這裡其實不用把window物件設定一個rem屬性,因為a.rem只是設定了一次 a.rem = f.getBoundingClientRect().width / 16, f.style.fontSize = a.rem + "px" } var c, d = a.navigator.appVersion.match(/iphone/gi) ? a.devicePixelRatio : 1, //iphone手機要計算devicePixelRatio的值 e = 1 / d, //dpr表示一個CSS畫素對應於多少個物理畫素。那麼網頁的縮放比例很顯然就是其倒數,這樣才能在不同裝置上進行自適應 f = document.documentElement, g = document.createElement("meta"); //為window物件設定了dpr屬性,同時為window物件設定了resize方法 if (a.dpr = d, a.addEventListener("resize", function() { //在resize方法中如果兩次resize的時間間隔小於300ms,這時候我們會清除上一次的resize事件 clearTimeout(c), c = setTimeout(b, 300) }, !1), a.addEventListener("pageshow", function(a) { //pageshow事件在頁面顯示時候觸發,不論該頁面是否來自bfcache,在重新載入頁面中,pageshow會在load 事件觸發後觸發,而對於bfcache中的頁面,pageshow會在頁面狀態完全恢復的那一刻觸發。注意;雖然這個事件的目標是document,但是必須將其事件處理程式新增到window上。pageshow的event物件的persisted屬性是布林值,如果頁面儲存在bfcache中這個屬性為true。 a.persisted && (clearTimeout(c), c = setTimeout(b, 300)) }, !1), f.setAttribute("data-dpr", d), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + e + ", maximum-scale=" + e + ", minimum-scale=" + e + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g); //firstElementChild表示的就是head元素,為他指定一個meta標籤就可以了 else { var h = document.createElement("div"); h.appendChild(g), document.write(h.innerHTML) } b() }(window);
通過這段程式碼我們可以知道跟元素的fontSize和縮放比例都是通過動態計算出來的,因此可以在不同的裝置上進行適配