html5 viewport總結講述

這篇文章是關於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中文網其他相關文章！