一.viewport的概要

移動(dòng)端瀏覽器通常都在一個(gè)比屏幕更寬的虛擬窗口中渲染頁(yè)面，這個(gè)虛擬窗口就是viewport，目的是正常展示沒(méi)有做移動(dòng)端適配的網(wǎng)頁(yè)，可以讓他們完整的展現(xiàn)給用戶。我們有時(shí)用移動(dòng)設(shè)備訪問(wèn)桌面版網(wǎng)頁(yè)就會(huì)看到一個(gè)橫向滾動(dòng)條，這里可顯示區(qū)域的寬度就是viewport的寬度。

常規(guī)使用，頁(yè)面可以縮放就用下面的代碼

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

如果不想頁(yè)面縮放就用下面的代碼

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

二.css中的像素和設(shè)備像素的區(qū)別

在桌面網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，css中的1px就是設(shè)備上的1px；然而css中的1px僅僅是一個(gè)抽象的值，不代表實(shí)際像素為多少；而在移動(dòng)設(shè)備中，不同設(shè)備的像素密度是不一樣的，css中的1px可能并不等于真實(shí)設(shè)備的一個(gè)像素值。用戶縮放也會(huì)改變css中的1px代表多少設(shè)備像素。這個(gè)比例就是devicePixelRatio

物理像素/獨(dú)立像素 = devicePixelRatio
我們可以在瀏覽器中進(jìn)行縮放，在控制臺(tái)中打印window.devicePixelRatio來(lái)查看devicePixelRatio的大小。其中的獨(dú)立像素可以理解為css中的px。

三.視口基礎(chǔ)

代碼：

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

以下為viewport的幾個(gè)屬性，這些屬性可以混合來(lái)使用，多個(gè)屬性同時(shí)使用要用逗號(hào)隔開(kāi)。這里我們展開(kāi)一個(gè)概念，叫做ideal viewport，指的是理想情況下的viewport，不需要用戶縮放和橫向滾動(dòng)條就能正常查看網(wǎng)頁(yè)的所有內(nèi)容，并且能夠看清所有文字，無(wú)論這個(gè)文字在css中定義為多小，顯示出來(lái)時(shí)可以看清的。

四.viewport進(jìn)階

1.width和initial-scale
當(dāng)設(shè)置了width和initial-scale時(shí)，瀏覽器會(huì)自動(dòng)選擇數(shù)值最大的進(jìn)行適配。如設(shè)置：

<meta name="viewport" content="width=400, initial-scale=1">

瀏覽器會(huì)選擇數(shù)值大的進(jìn)行適配，如果當(dāng)前窗口ideal viewport寬度為300，initial-scale值為1，取得是width為400的值；如果當(dāng)前窗口的ideal viewport為480，則取480。

事實(shí)上，width=device-width和initial-scale=1都代表應(yīng)用ideal viewport，但在ipad、iphone等移動(dòng)設(shè)備和IE上，橫豎屏不分，默認(rèn)都取豎屏的寬度，兼容性最好的寫(xiě)法就是

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

2.動(dòng)態(tài)改變屬性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

viewport概念

移動(dòng)端瀏覽器通常都在一個(gè)比屏幕更寬的虛擬窗口中渲染頁(yè)面，這個(gè)虛擬窗口就是viewport，目的是正常展示沒(méi)有做移動(dòng)端適配的網(wǎng)頁(yè)，可以讓他們完整的展現(xiàn)給用戶。我們有時(shí)用移動(dòng)設(shè)備訪問(wèn)桌面版網(wǎng)頁(yè)就會(huì)看到一個(gè)橫向滾動(dòng)條，這里可顯示區(qū)域的寬度就是viewport的寬度。

css中的像素和設(shè)備像素的區(qū)別

在桌面網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，css中的1px就是設(shè)備上的1px；然而css中的1px僅僅是一個(gè)抽象的值，不代表實(shí)際像素為多少；而在移動(dòng)設(shè)備中，不同設(shè)備的像素密度是不一樣的，css中的1px可能并不等于真實(shí)設(shè)備的一個(gè)像素值。用戶縮放也會(huì)改變css中的1px代表多少設(shè)備像素。這個(gè)比例就是devicePixelRatio

物理像素/獨(dú)立像素 = devicePixelRatio

我們可以在瀏覽器中進(jìn)行縮放，在控制臺(tái)中打印window.devicePixelRatio來(lái)查看devicePixelRatio的大小。其中的獨(dú)立像素可以理解為css中的px。

視口基礎(chǔ)
一個(gè)典型的針對(duì)移動(dòng)端優(yōu)化的站點(diǎn)包含類(lèi)似下面的內(nèi)容：

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

以下為viewport的幾個(gè)屬性，這些屬性可以混合來(lái)使用，多個(gè)屬性同時(shí)使用要用逗號(hào)隔開(kāi)。這里我們展開(kāi)一個(gè)概念，叫做ideal viewport，指的是理想情況下的viewport，不需要用戶縮放和橫向滾動(dòng)條就能正常查看網(wǎng)頁(yè)的所有內(nèi)容，并且能夠看清所有文字，無(wú)論這個(gè)文字在css中定義為多小，顯示出來(lái)時(shí)可以看清的。

viewport進(jìn)階

1.width和initial-scale
當(dāng)設(shè)置了width和initial-scale時(shí)，瀏覽器會(huì)自動(dòng)選擇數(shù)值最大的進(jìn)行適配。如設(shè)置：

<meta name="viewport" content="width=400, initial-scale=1">

瀏覽器會(huì)選擇數(shù)值大的進(jìn)行適配，如果當(dāng)前窗口ideal viewport寬度為300，initial-scale值為1，取得是width為400的值；如果當(dāng)前窗口的ideal viewport為480，則取480。

事實(shí)上，width=device-width和initial-scale=1都代表應(yīng)用ideal viewport，但在ipad、iphone等移動(dòng)設(shè)備和IE上，橫豎屏不分，默認(rèn)都取豎屏的寬度，兼容性最好的寫(xiě)法就是

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

2.動(dòng)態(tài)改變屬性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

好了，這篇文章就介紹到這了大家可以根據(jù)自己測(cè)需要要選擇。一般來(lái)說(shuō)pc與移動(dòng)不帶自適應(yīng)的就可以用不支持縮放的，如果跳轉(zhuǎn)到移動(dòng)端的可以縮放也沒(méi)有影響。