? ?我敢肯定，你們都使用視口meta標(biāo)簽的響應(yīng)設(shè)計(jì)的，但你是否知道視口標(biāo)簽無(wú)響應(yīng)的設(shè)計(jì)也可以是非常有用的嗎？如果你還沒(méi)有將您的設(shè)計(jì)，響應(yīng)時(shí)間，你應(yīng)該如何使用視口標(biāo)簽，以改善外觀的設(shè)計(jì)在移動(dòng)設(shè)備上閱讀這篇文章。

一般使用視口的標(biāo)簽

視口meta標(biāo)簽通常用于響應(yīng)的設(shè)計(jì)，設(shè)置視口的寬度和初始規(guī)模在移動(dòng)設(shè)備上。下面是一個(gè)簡(jiǎn)單的視口標(biāo)簽。

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

使用視口標(biāo)簽無(wú)響應(yīng)的設(shè)計(jì)

正如你可能知道，在iPhone上的默認(rèn)視口的寬度是980px。但是你的設(shè)計(jì)可能不適合在這個(gè)范圍內(nèi)。它可能是更寬或更窄。下面是兩個(gè)例子，在那里你可以利用視口標(biāo)簽無(wú)響應(yīng)的設(shè)計(jì)在移動(dòng)設(shè)備上的提高渲染。

第一個(gè)案例：

在左側(cè)的屏幕截圖顯示，該網(wǎng)站將提供沒(méi)有視口標(biāo)簽。正如你可以看到，頁(yè)面的雙方接觸。我視口標(biāo)簽到指定的視口的寬度為1024px，所以給人們留下一定的余量空間上的左，右兩側(cè)。

<meta name="viewport" content="width=1024">

另一個(gè)例子

如果您的設(shè)計(jì)過(guò)于狹窄，它也可能會(huì)導(dǎo)致一個(gè)問(wèn)題。讓我們說(shuō)您的設(shè)計(jì)容器的寬度是700px，它是不敏感的，它會(huì)像在左側(cè)的截圖是一個(gè)很大的空的空間在右邊。

通過(guò)設(shè)置視口的寬度為720px，你可以簡(jiǎn)單地解決這個(gè)問(wèn)題。您的設(shè)計(jì)寬度并沒(méi)有改變，但iPhone將它的規(guī)模，以適應(yīng)在720px。

<meta name="viewport" content="width=720">

常見(jiàn)的錯(cuò)誤

一個(gè)常見(jiàn)的??錯(cuò)誤是，人們通常適用于無(wú)響應(yīng)設(shè)計(jì)的初始規(guī)模為1。這將會(huì)使頁(yè)面呈現(xiàn)在無(wú)縮放100％。如果你的設(shè)計(jì)是沒(méi)有反應(yīng)的，用戶(hù)將不得不平移或縮小以看到完整的網(wǎng)頁(yè)。最壞的情況是結(jié)合用戶(hù)的可擴(kuò)展性=沒(méi)有或最大規(guī)模= 1，初始規(guī)模為1。這將禁用縮放和縮放功能，您的網(wǎng)站。用戶(hù)隨著縮放殘疾人，有沒(méi)有辦法縮小以看到完整的頁(yè)面。請(qǐng)記?。喝绻愕脑O(shè)計(jì)是沒(méi)有反應(yīng)的，不復(fù)位初始規(guī)?；蚪每s放！

meta標(biāo)簽后面的參數(shù)詳解：

width: viewport 的寬度 （范圍從 200 到 10,000 ，默認(rèn)為 980 像素 ）

height: viewport 的高度 （范圍從 223 到 10,000 ）

initial-scale: 初始的縮放比例 （范圍從>0到 10 ）

minimum-scale: 允許用戶(hù)縮放到的最小比例

maximum-scale: 允許用戶(hù)縮放到的最大比例

user-scalable: 用戶(hù)是否可以手動(dòng)縮放

對(duì)于這些屬性，我們可以設(shè)置其中的一個(gè)或者多個(gè)，并不需要你同時(shí)都設(shè)置，iPhone 會(huì)根據(jù)你設(shè)置的屬性自動(dòng)推算其他屬性值 ，而非直接采用默認(rèn)值。

如果你把initial-scale=1 ，那么 width 和 height在豎屏?xí)r自動(dòng)為320*356 （不是320*480 因?yàn)榈刂窓诘榷颊紦?jù)空間 ），橫屏?xí)r自動(dòng)為 480*208。類(lèi)似地 ，如果你僅僅設(shè)置了 width ，就會(huì)自動(dòng)推算出initial-scale 以及height。例如你設(shè)置了 width=320 ，豎屏?xí)r initial-scale 就是 1 ，橫屏?xí)r則變成 1.5 了。 那么到底這些設(shè)置如何讓 Safari 知道 ？其實(shí)很簡(jiǎn)單 ，就一個(gè) meta ，形如 ：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />