本篇文章是關于HTML5中的viewport的一個講述，對于HTML5中viewport不太熟悉的同學，我們可以一起看看本篇文章！來詳細的了解一下html5中的viewport

總結下來無非圍繞三個問題:
1、為什么要設置虛擬窗口
起初是為了使得虛擬窗口的分辨率和pc端接近，這樣虛擬窗口依然能夠完整顯示 頁面內容，只是頁面內容比較小，需要通過手動縮放的方式來看清楚頁面。
2、添加viewport有什么用
添加viewport是為了方便移動端的優化。設置虛擬窗口寬度為device-width，與設備的物理像素相同，這樣我們就可以通過media來控制頁面移動界面的顯示方式。
3、設備屏幕寬度(即設備的物理像素)與分辨率的關系
以iphone6為例，其屏幕實際大小為375*667，然而其分辨率達到750*1334,這兩者是不同的概念。
物理尺寸是指屏幕的實際大小。大的屏幕同時必須要配備高分辨率，也就是在這個尺寸下可以顯示多少個像素，顯示的像素越多，可以表現的余地自然越大。兩臺手機的屏幕大小差不多大，卻一個只能顯示兩行漢字，另一個則可以顯示五行漢字，拋開字體大小差別，關鍵就是屏幕的分辨率，后者分辨率大一些，自然在同樣字體大小下可以顯示更多行的漢字。彩屏手機的確好，沒有足夠大分辨率的屏幕表現，再高的顏色質量又有何用。

下面我們來解釋一下viewport的作用和它怎樣與media結合。
一個50像素寬的p在pc瀏覽器顯示可能剛好，但是如果在手機瀏覽器顯示就會顯得過大。怎么解決這個問題呢？Apple找到了一個辦法：在移動版(iOS)的Safari中定義了viewport meta標簽，它的作用就是創建一個虛擬的窗口(viewport)，而且這個虛擬窗口的分辨率接近于桌面顯示器，Apple將其定位為980px。也就是當我用瀏覽器中打開任意的一個頁面，這個頁面的寬度為980px，而不是屏幕的物理寬度。
以一代iphone6下的Safari來說就是：
在iphone6的375px物理屏幕上——視覺窗口(visual viewport)，創建出了一個980px的虛擬窗口——布局窗口(layout viewport)，在視覺窗口(visual viewport)中我們可以拖動橫向豎向滑動條或者放大縮小網頁，來達到最佳的瀏覽效果(類似桌面瀏覽器)；而布局窗口(layout viewport)用來配合CSS渲染布局，例如當我們設置一個容器的寬度為100%時，這個容器的實際值為980px而不是375px。如此一來大部分 網頁就能以縮放的形式正常的顯示在手機屏幕上了。

虛擬窗口980px在屏幕上的實際尺寸是多大?
iphone6屏幕的物理像素是375px，虛擬窗口的寬度是980px，這兩者的1px大小是不想等，說得更簡單一點就是此px非彼px，一個是用來形容實際窗口即視覺窗口的大小，一個是用來形容虛擬窗口的大小，沒什么相關的。(可以通過chromn來檢查頁面在pc瀏覽器和手機瀏覽器的寬度。)

• safari瀏覽器、opera瀏覽器、chromn瀏覽器 虛擬窗口大小默認都是980px，火狐瀏覽器默認開啟手機模式，其虛擬窗口寬度就是設備寬度。

  智能手機創建出虛擬窗口后，又出現一個問題，pc端網頁在手機瀏覽器打開后無論是字體還是其它元素都顯得比較小，看起來比較吃力，動手縮放又顯得比較麻煩。apple又弄出個viewport用來調整虛擬窗口的大小，一般我們會這樣寫

<meta name="viewport" content="width =device-width,initial-scale=1,user-scalable=1">

device-width表示設置虛擬窗口的大小同設備的物理像素寬度相等。這樣方便我們使用media寫一個專門適配移動端的頁面，這樣我們就可以在移動端看到合適大小的頁面。

以上就是html5 viewport總結講述的詳細內容，更多請關注php中文網其它相關文章！