前幾天偶然看到乙個pc端網頁，發現用手機開啟竟然同比縮放了，作為乙個前端從業者，我自然想要弄清它到底是怎麼縮放的。之後查了它的meta資訊，css和js，發現沒有任何相容手機端的**，那它到底是怎麼縮放的呢？百思不得其解，最後無意中看別人說viewport的預設值是980px，才知道原來是viewport的鍋。
本來看了移動前端開發之viewport的深入理解，但是仍然有一些概念不理解，於是去看了ppk大神對於viewport的研究（第一篇，第二篇，第三篇），算是理清了。
首先從css畫素和實際畫素說起，css畫素就是我們寫的css的畫素，如果沒有進行任何縮放的話，css畫素就和實際畫素是一樣的，如果用瀏覽器對頁面進行了縮放，那麼css畫素不變，實際畫素會根據縮放比例變化。
值得一提的是，縮放是個很重要的概念，在pc端的網頁一般沒有進行縮放，所以1px的css畫素常常等於1px的實際畫素。
取viewport寬高，用document.documentelement.clientwidth和document.documentelement.height。
取裝置寬高，用screen.width和screen.height。
取視窗可視區域寬高，用window.innerwidth和window.innerheight。
取可視區域偏移量，用window.pagexoffset和window.pageyoffset。
viewport寬高是用document.documentelement.clientwidth和document.documentelement.height來取到的。細心觀察可以發現，document.documentelement就是html元素，而document.documentelement.clientwidth就是html的寬度。
我們知道，css裡面的包含塊的寬度會自動延伸至父元素的寬度，所以最外層包含塊的寬度會延伸到body的寬度，而body的寬度會延伸到html的寬度，那html的寬度延伸到什麼寬度呢？答案是viewport的寬度！所以可以用html的寬度來度量viewport的寬度。
另外，這裡有乙個小坑，就是html的寬度是可以修改的，但是即使修改了html的寬度，document.documentelement.clientwidth和document.documentelement.height的值仍然是viewport的寬高，這是html元素的這2個屬性的不同之處。
那當我們改了html的寬度之後，怎麼獲得html的寬高呢？方式是利用document.documentelement.offsetwidth和document.documentelement.offsetheight.
明白了上面viewport的寬高機制之後就很好理解移動端的viewport了。
移動端由於裝置的畫素很小，所以如果不進行縮放的話，就只能看到pc端網頁的部分內容，所以移動端瀏覽器在相容的時候，會對頁面進行縮放，但是為了避免在縮放的時候頁面發生重排和重繪，瀏覽器就有2個viewport，乙個是我們常說的viewport，它用來放置頁面，它的預設值寬度是980px；另乙個是可視區域的visual viewport，它是移動端的可視區域，用來放大或縮小。
在pc端，我們常說的viewport就等於可視區域的visual viewport，所以css畫素和實際畫素比是1比1。
在移動端，由於放置頁面的viewport的寬度預設為980px，但是裝置的寬度常常小於980px，所以可視區域的viewport會對它進行縮放，直到頁面內容的寬度正好達到螢幕的寬度。所以我們用手機端看到的pc端頁面都是已經縮放過的（如果頁面沒有設定viewport的話）。
注意，有些情況下，可視區域的viewport的寬度不會等於放置頁面的viewport的寬度。比如有乙個頁面，我們設定它的最外層包含塊的最小寬度為1250px，那麼放置頁面的viewport的寬度仍是預設值980px，但是可視區域的viewport的寬度會達到1250px。
那怎麼得到可視區域的縮放比例呢？它等於裝置的寬度除以可視區域的寬度，即：screen.width/window.innerwidth。（注意不是viewport的寬度）
其他寬度資訊也可以按照上面列出的方法來取。
如果是專門為移動端做的頁面，那麼常常要設定viewport，使它的兩個viewport都等於裝置寬度。**如下：
你可能不知道的東西
元素可以分為塊級元素，行內元素以及行內塊級元素。行內元素的margin或者padding只有margin left和margin right以及padding left和padding right有效果，margin top margin bottom padding top padding bot...
你可能不知道的const
眾所周知，使用 const 宣告的變數必須同時初始化為某個值。一經宣告，在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...
你可能不知道的python logging機制
先來看幾個例子,先想一下執行結果，答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...