viewport1

##1. PC頁面到手機頁面

一個很大的pc頁面如何在手機上顯示

• 瀏覽器窗口變化大小：

頁面 出現滾動條，頁面須要拖滾動條才能夠看完成

• 手機設備上

頁面徹底顯示，沒有出現橫向滾動條，但字體很小，看不清楚。頁面感受按比例總體總體縮小。

• 緣由

手機上的瀏覽器確定作了某種設置，而PC上的瀏覽器沒作特殊設置。

移動端的網頁開發趨勢正在不斷上升，但因爲手持設備的屏幕一般都比較小，那麼怎樣在一個相對較小的屏幕上更好的展現網頁內容呢？咱們就來深刻了解一下viewport這個html中的meta標籤。

2.移動端的瀏覽器設置

2.1 viewport

移動端的網頁開發趨勢正在不斷上升，但因爲手持設備的屏幕一般都比較小，那麼怎樣在一個相對較小的屏幕上更好的展現網頁內容呢？咱們就來深刻了解一下viewport這個html中的meta標籤。

####2.1 手機用來顯示咱們網頁的區域 一般來講，移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域。不一樣設備上的瀏覽器的默認viewport的寬度也不同。以下圖

手機出廠時自帶的瀏覽器設置了用來顯示網頁的寬度，一般默認是980

電腦瀏覽器調整寬度爲980px,縮放頁面指導所有看得見

咱們能夠看到咱們縮放 50%的時候，pc上的頁面也徹底顯示了

####2.2 在一個相對較小的屏幕上更好的展現網頁內容

固定一個窗口寬度，適當的縮放（也許50%)頁面，頁面就徹底顯示出來了，佈局基本不變，字體有變小。

能夠判定手機上就是這樣作的。一開始讓頁面在980px的寬度上顯示，
適當的縮放讓頁面徹底顯示在頁面上。

####2.3 初始寬度和縮放比例

3.viewport的劃分

爲了更好的理解和應用viewport，能夠把viewport細分一下。分別爲（可見viewport，佈局viewport，理想viewport），以下圖：

1. 可見viewport
2. 佈局viewport
3. 理想viewport

####3.1 理想viewport的寬度等於移動設備的屏幕寬度 ####3.2 理想viewport的意義 理想viewport是最適合移動設備的viewport，理想viewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元素的寬度設爲理想viewport的寬度(單位用px)，那麼這個元素的寬度就是設備屏幕的寬度了，也就是寬度爲100%的效果

理想viewport 的意義在於，不管在何種分辨率的屏幕下，那些針對理想viewport 而設計的網站，不須要用戶手動縮放，也不須要出現橫向滾動條，均可以完美的呈現給用戶。以下圖是在iPhone6上顯示的效果

無需縮放，完美呈現

##4. 實踐運用

4.1 viewport設置1

移動設備默認的viewport是佈局viewport，但在進行移動設備網站的開發時，咱們須要的是理想viewport。

因此，咱們要利用meta標籤對viewport進行控制。關於viewport標籤的屬性，以下圖所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

4.2 viewport設置2

如下兩種方式均可以把當前的viewport寬度設置爲理想viewport的寬度：

1.<meta name="viewport" content="width=device-width">

說明：width=device-width指定了寬度爲設備（理想）寬度；

2.<meta name="viewport" content="initial-scale=1">

說明：initial-scale是相對於理想viewport來進度縮放，因此值爲1的時候就是理想viewport的寬度。 但以上兩種方式針對某些瀏覽器的顯示有特殊狀況，以下圖：

2. 總結 因此 兩個都設置。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

4.3 改變viewport的方法

動態改變meta viewport標籤的兩種方法 1.使用document.write來動態輸出meta viewport標籤； 2.經過setAttribute來改變 。 代碼以下圖：

5. 實踐效果

下圖是使用viewport標籤和沒用使用時的效果差異，請參考：

• 使用：

• 沒有使用