乙個網頁被用在手機瀏覽器**時，都會做兩件事：
第一，把內容放在960px的網頁上；
第二，將該網頁進行縮放。
這樣做的目的是讓pc端的網頁在移動端排版正確，而且能看到整個網頁
該960px的網頁就稱為視口viewport
縮放後的網頁成為度量viewport
我們可以用document.body.clientwidth檢視視口viewport
用window.innerwidth檢視度量viewport
window.innerwidth/document.body.clientwidth檢視縮放比
這樣980px的viewport 是不適合的
meta標籤用來改造viewport
讓布局viewport等於裝置寬度
讓縮放比等於一，從而三者相等。
初學前端之路 1視口控制（viewport）
當設計者設計網頁的時候，會按照固定的寬度設計，比如pc端1000畫素或者1200畫素等，在移動端640畫素或者750畫素，當轉換到pc端的時候可能也會滿足不了頁面需求，可能會顯示不完整，裝置寬度遠遠不夠。為了彌補這一點，移動裝置上瀏覽器會把視口放大，一般是980畫素或者1024畫素。但這樣帶來的後果...
視口和視窗
對映方式指定了邏輯座標系的邏輯單位和座標軸正方向,座標原點沒有涉及。而且,在 自作主張的 兩種對映方式下,邏輯單位 座標軸正方向和座標原點都有待確定。視口 是基於裝置座標的,通常,視口與客戶區相同。點 0,0 是客戶區域的左上角。x 的值向右增加,y 的值向下增加。視窗 是基於邏輯座標的,邏輯座標可...
移動端視口（viewport）和布局
兩種畫素 物理畫素和 css 畫素。物理畫素 解析度，裝置螢幕的物理畫素。css 畫素 由web開發者提供，是 css 中使用的乙個抽象單位。三個視口 布局視口 layout viewport 視覺視口 visual viewport 和理想視口 ideal viewport 布局視口是移動端預設的...