移動端web 視口

視口（viewport）

問題：寫乙個div寬度為320px，使用手機端比如iphone4開啟，應該是佔滿的，但是看效果？

答：並沒有佔滿一行，此時html標籤的寬度是980px。

因為：瀏覽器在顯示移動端網頁時，會預設給予980px的布局空間（即：布局視口空間）

什麼是視口？可以簡單理解為：瀏覽器給網頁布局的空間

布局視口

用於在手機上檢視pc端網頁的問題，手機端的頁面開啟的時候會在視口空間中開啟

布局視口：用於頁面布局的空間，預設寬度是980px。

出現的歷史原因：

簡單理解：布局視口就是乙個中間商，如果沒有布局視口，移動端會直接檢視pc端的網頁，由於pc端網頁寬度為980px，移動端檢視很可能就會顯示不全或者導致pc端網頁布局混亂。

布局視口先通過設定和pc端網頁一樣的寬度，讓pc端網頁在布局視口中完美展示頁面布局，等pc端網頁布局完了，顯示完整了，隨後布局視口進行縮放，

縮放到和手機裝置寬度一樣（比如iphone6 375px的寬度），這樣就解決了移動端直接檢視pc端網頁的顯示不全和布局混亂的問題。

理想視口

就是布局視口的乙個理想尺寸，也是實際開發移動web的常見設定。

早期：移動端只能訪問pc端的網頁，需要布局視口為980px，讓網頁可以在手機端正常顯示。

現在：移動端直接訪問移動端網頁，不需要訪問980px的pc端網頁，此時還需要布局視口為980px嗎？

理想視口：設定布局視口的尺寸等於當前裝置螢幕的尺寸，就是理想視口。

比如說，現在就只需寫移動端的網頁（比如iphone6 375px），不需要980px的網頁寬度，此時只需設定視口為375px，表示此時中間商給網頁設定的寬度就是375px，這樣就是理想視口。

那就剩乙個問題了，我們如何設定布局視口的尺寸就等於當前裝置螢幕的尺寸呢？

meta標籤設定視口

通過meta標籤可以進行視口的設定

屬性解釋說明

width

設定視口的寬度，device-width表示當前裝置的寬度

user-scalable

設定使用者是否可以縮放，yes/no

initial-scale

初始縮放比

maximum-scale

最大縮放比

minimum-scale

最小縮放比

開發移動端網頁時，一般都需要加上meta標籤設定視口。

移動端web視口

移動前端中常說的 viewport 視口 就是瀏覽器顯示頁面內容的螢幕區域 總結首先看一下meta元標籤極其屬性 name viewport content width device width initial scale 1.0 maximum scale 1 user scalable no 這...

web移動視口

視口 viewport 是用來約束 中最頂級塊元素的，即它決定了的大小。pc裝置 在pc裝置上viewport的大小取決於瀏覽器視窗的大小，以css畫素做為度量單位。通過以往css的知識，我們都能理解的大小是會影響到我們的網頁布局的，而viewport又決定了的大小，所以viewport間接的決定並...

移動端布局三種視口 移動端的三個視口

本文記錄學到的有關視口的內容，不足之處請指正。1 視口 有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度...