移動端H5知識[系列] - 視口viewport

HTML5學堂：移動端從2012年走到今日，已經占領了互聯網的半壁江山。網站開發也從PC平臺向移動端平臺開發發展。作為一個優秀的前端開發者，除了能夠處理傳統平臺的網站，還需要能夠處理移動端的網頁。可是，新的事物伴隨著各個瀏覽器，也就冒出了各種兼容問題。第二步——視口

前些日子，趁平日空隙書寫了類庫系列，這幾天就來“普及”一下移動端HTML5開發的小知識吧~！雖然知識小，但是不得不承認的是，它們很重要~！

本系列共6篇文章，如下為標題列表：

1 談談相對單位

2 什么是視口

3 CSS3媒體查詢

4 移動端“百變”盒模型

5 移動端“背景”妙用

6 移動端fixed定位模式

第二篇 視口

視口指的是移動設備中的設備屏幕窗口。

在移動端瀏覽器當中，存在著兩種視口，一種是可見視口(也就是我們說的設備大小)，另一種是視窗視口(網頁的寬度是多少)。什么是可見視口，什么又是視窗視口呢？此處舉一個例子：如果我們的屏幕是320像素*480像素的大小(iPhone4)，假設在瀏覽器中，320像素的屏幕寬度能夠展示980像素寬度的內容。那么320像素的寬度就是可見視口的寬度，而能夠顯示的980像素的寬度就是視窗視口的寬度。

為了顯示更多的內容，大多數的瀏覽器會把自己的視窗視口擴大，簡易的理解，就是讓原本320像素的屏幕寬度能夠容下980像素甚至更寬的內容(將網頁等比例縮小)。

常見viewport數值

iPhone：980

iPad：1024

Android：980

WinPhone：1024

為了讓用戶能夠看清晰設備中的內容，因此我們并不讓瀏覽器按照默認的viewport進行展示。此時就需要進行設置，要盡量保持分辨率和媒體設備視口大小比例為1：1，從而得到最佳的顯示效果。

進行視口的設置有兩種不同的方法，一種是在meta標簽當中，進行視口的設置，通過調整屬性值設置視口的具體大小。另一種是使用@viewport進行設置。相比之下，meta更加好用且兼容良好。因此，在此我僅講解第一種設置方法。

窗口默認顯示效果

設置視口

將視口設置為320像素

當前的顯示狀態

將視口設置為設備寬度

將視口設置為設備寬度，并在最初的時候以放大2倍的方式顯示

歡迎溝通交流~HTML5學堂

將視口設置為設備寬度，并允許縮放，最大放大到2倍，最小縮小到1/2

將視口設置為設備寬度，并禁止縮放

視口的相關知識點

width 設定布局視口寬度

height 設定布局視口高度

initial-scale 設定頁面初始縮放比例(0-10.0)

user-scalable 設定用戶是否可以縮放(yes/no)

minimum-scale 設定最小縮小比例(0-10.0)

maximum-scale 設定最大放大比例(0-10.0)

target-densitydpi* 設定目標屏幕的dpi(device-dpi)

結束~！

歡迎溝通交流~HTML5學堂

總結

以上是生活随笔為你收集整理的移动端布局三种视口_移动端开发知识[系列] - 视口viewport的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。