最近項(xiàng)目中需要開(kāi)發(fā)內(nèi)嵌的H5頁(yè)面，viewport不是很熟悉，故來(lái)翻譯一下此篇文件加深理解

原文

配置viewport

IOS上的safari使用一種縮放的工作模式來(lái)展示pc端的網(wǎng)頁(yè)，如果默認(rèn)的設(shè)置對(duì)你的網(wǎng)頁(yè)展示不友好，推薦你改變veiwport默認(rèn)配置，開(kāi)發(fā)IOS上使用的網(wǎng)頁(yè)，你需要設(shè)置viewport，在html文檔中，增加一行標(biāo)記來(lái)配置viewport，但是要理解viewport怎么對(duì)你的網(wǎng)頁(yè)展示還是很容易混淆，在配置viewport之前，你需要深度理解一下ios上的viewport

viewport是什么

在PC和IOS上瀏覽器的viewport有一些不太一樣

在IOS上的safari，沒(méi)有窗口、滾動(dòng)條、調(diào)整窗口的按鈕見(jiàn)圖3-1，用戶輕彈手指來(lái)操作，用戶通過(guò)雙擊、雙手捏開(kāi)來(lái)放大，雙手捏緊來(lái)縮小，這些收拾在pc端是不支持的，由于用戶有不同的操作方式來(lái)操作pc端和移動(dòng)端的頁(yè)面，所以viewport在pc端和移動(dòng)端表現(xiàn)不一樣，由于不一樣的表現(xiàn)，所以相同的css和html也有不一樣的表現(xiàn)。

圖3-1

桌面的safari viewport

桌面瀏覽器的viewport是網(wǎng)頁(yè)的可視區(qū)域如圖3-2，如果頁(yè)面的寬度大于viewport，用戶可以通過(guò)縮放按鈕來(lái)縮放瀏覽器的viewport大小，用戶也可以控制滾動(dòng)條看到更多的頁(yè)面內(nèi)容，當(dāng)viewport變化，safari 也許會(huì)重新布局，比如會(huì)擴(kuò)充壓縮寬度是適配viewport，如果頁(yè)面寬度小于viewport，那么剩余位置會(huì)填充剩余的空白

3-2

IOS上的viewport

在IOS上，viewport取決于內(nèi)容如何布局、文本在頁(yè)面上的換行情況，viewport可能大于或小于可視區(qū)域，當(dāng)用戶在IOS上平移網(wǎng)頁(yè)時(shí)灰色條形顯示在屏幕的右側(cè)和底部，作為視覺(jué)反饋，向用戶顯示與視口相比可見(jiàn)區(qū)域的大小，用戶可以使用雙擊輕點(diǎn)、捏開(kāi)、捏緊手勢(shì)來(lái)改變viewport的縮放比例，唯一的例外是，當(dāng)用戶從縱向更改為橫向時(shí)，在某些情況下，iOS上的Safari可能會(huì)調(diào)整視口的寬度和高度，并因此更改網(wǎng)頁(yè)布局

默認(rèn)viewport配置

初始化設(shè)置寬度和縮放比例是為了讓大部分網(wǎng)頁(yè)可以很好的展示，如果3-3，默認(rèn)的寬度是980px，當(dāng)然這個(gè)默認(rèn)值，可能不能很好的適配你的網(wǎng)頁(yè)，特別是如果您要針對(duì)特定??設(shè)備定制網(wǎng)站，例如3-3右邊的圖，網(wǎng)頁(yè)展示的太窄了，這樣的話，你可以修改默認(rèn)的viewport

3-3

viewport meta tag

使用viewport meta標(biāo)簽來(lái)提高網(wǎng)頁(yè)的展示，你可以設(shè)置viewport來(lái)這是默認(rèn)的寬度和初始化縮放值，例如，如果你的網(wǎng)頁(yè)比980更窄，你應(yīng)該設(shè)置寬度為你網(wǎng)頁(yè)內(nèi)容的寬度，如果你專門(mén)為iphone ipod開(kāi)發(fā)的web程序，你應(yīng)該設(shè)置為設(shè)備的寬度

由于iOS在具有不同屏幕分辨率的設(shè)備上運(yùn)行，因此在引用設(shè)備尺寸時(shí)，應(yīng)使用常量而不是數(shù)字值。使用device-width作為設(shè)備的寬度，并使用device-height作為縱向的高度

你不需要設(shè)置所有的viewport屬性，如果僅設(shè)置了一部分屬性，然后iOS上的Safari會(huì)推斷其他值，例如如果你設(shè)置了默認(rèn)的初始縮放為1.0，瀏覽器會(huì)推測(cè)橫向?qū)挾葹閐eivce-width，如果是縱向是，deivce-height為頁(yè)面寬度，因此，如果你向設(shè)置width為980px初始化scale為1.0，那你需要設(shè)置這兩個(gè)屬性

設(shè)置寬度為device-width

設(shè)置默認(rèn)縮放

改變viewport的寬度和高度

在IOS上，你有一個(gè)非常重要的任務(wù)就是去設(shè)置viewport的寬度去適配你的web程序內(nèi)容寬度，這樣來(lái)確保你的網(wǎng)頁(yè)在ios上看起來(lái)是正常的

如果你的網(wǎng)站必須要在980px下才能很好的適配，如果IOS上的safari不能設(shè)置980的viewport，只能左上角灰色的小塊能夠展示出來(lái)，這個(gè)默認(rèn)就不能展示頁(yè)面的所有內(nèi)容，這樣的話，你就需要設(shè)置meta去適配supported

3-4

如果頁(yè)面的寬度小于默認(rèn)的viewport寬度，那么頁(yè)面展示將如圖3-5左邊的圖片，現(xiàn)在設(shè)置viewport的寬度為頁(yè)面的寬度，此刻展示如圖3-5右邊，為了實(shí)現(xiàn)右邊效果，你需要在你的html文件中的

增加如下代碼

3-5

iphone、ipod觸屏設(shè)備上，web程序開(kāi)發(fā)中，非常重要的是改變viewport的width為設(shè)備的寬度，圖3-6展示了，設(shè)置viewport為divice-width是的效果

3-6

瀏覽器是怎么設(shè)置初始化的寬度 高度 和初始化縮放

如果你設(shè)置了一些屬性，這時(shí)瀏覽器會(huì)自動(dòng)計(jì)算其他屬性的值，以適配網(wǎng)頁(yè)的展示，例如，如果只設(shè)置了初始化的縮放值，這時(shí)候width和height會(huì)自動(dòng)計(jì)算，相似的 如果只設(shè)置了width，那么heigh和scale會(huì)自動(dòng)計(jì)算，如果你設(shè)置的值沒(méi)有生效，那么需要設(shè)置更多的值。

由于瀏覽器可以自動(dòng)推算寬度、高度、縮放比例，那么用戶旋轉(zhuǎn)手機(jī)方向時(shí)，viewport的視口發(fā)生變化，例如當(dāng)用戶通過(guò)旋轉(zhuǎn)設(shè)備從縱向更改為橫向時(shí)，視區(qū)寬度可能會(huì)擴(kuò)大，僅有這種用戶行為可能引起viewport的重新計(jì)算，改變?cè)跒g覽器的布局。

在iOS上，Safari的目標(biāo)是當(dāng)網(wǎng)頁(yè)完全縮小時(shí)，保持與任一方向上可見(jiàn)區(qū)域的比率相等的比率，使其適合可見(jiàn)區(qū)域，這最好通過(guò)獨(dú)立設(shè)置視區(qū)屬性來(lái)說(shuō)明，然后觀察其他viewport屬性對(duì)viewport影響，下面一系列的例子來(lái)展示，相同的web 內(nèi)容和不同viewport的設(shè)置相同影響。

圖3-7展示采用默認(rèn)寬度980px和沒(méi)有默認(rèn)縮放行為的 viewport，來(lái)一個(gè)web頁(yè)面的展示

3-7

圖3-8 設(shè)置了initial scale為1.0展示相同的web頁(yè)面，瀏覽器去推算了width和height去適配了網(wǎng)頁(yè)可視區(qū)域展示，這個(gè)width被推算成了橫向時(shí)device-width，縱向時(shí)device-height

3-8

相似的，如果你近設(shè)置了viewport的寬度，這個(gè)height和initial scale也會(huì)推算出來(lái)，圖3-9，展示phone設(shè)置viewport width為320時(shí)，縱向展示跟圖3-8一致，橫向展示的時(shí)候width等于device-width，它改變了初始的比例，當(dāng)用戶改變到橫向時(shí)，它有放大的效果

3-9

圖3-10，在設(shè)置viewport width一個(gè)小于可視區(qū)域的寬度200px，展示相同的頁(yè)面，網(wǎng)頁(yè)的viewport被設(shè)置了200px時(shí)，推斷高度和影響頁(yè)面第一次渲染的的initical scale

3-10

最后，圖3-11設(shè)置了width和initical scale值來(lái)展示相同頁(yè)面，瀏覽器保持可視區(qū)域兩個(gè)方向上相同比率的自動(dòng)推算了高度，因此如果width設(shè)置為980，initical width 為1.0 那么瀏覽器會(huì)推算出 手機(jī)橫置時(shí)為1091，縱置時(shí)為425

3-11

minimum-scale和maximum-scale屬性也會(huì)被影響，當(dāng)手機(jī)改變方式時(shí)，這兩個(gè)屬性的范圍[0, 10.0], 默認(rèn)的minimum-scale 0.25 maximum-scale 5.0

web程序設(shè)置viewport

如果你準(zhǔn)備開(kāi)發(fā)ios下的web應(yīng)用程序，推薦設(shè)置你網(wǎng)頁(yè)的寬度為ios上的可視化寬度，設(shè)置為device-width，因此initical scale 為1.0，讓用戶改變手機(jī)方向時(shí)，viewport不會(huì)重新計(jì)算

如果你不改變?yōu)g覽器的viewport 屬性，你的網(wǎng)頁(yè)會(huì)展示在頁(yè)面的左上角如圖3-12，在開(kāi)發(fā)web應(yīng)用程序時(shí)，設(shè)置viewport的width 應(yīng)該是你的首要任務(wù)，不需要用戶通過(guò)縮放來(lái)使用你的程序

3-12

如果設(shè)置來(lái)device-width，那么你的網(wǎng)頁(yè)展示如圖3-13所有，用戶可以向下滑動(dòng)來(lái)看余下的網(wǎng)頁(yè)，如果比可視區(qū)域更高

3-13

你也許不想用戶去縮放web程序，在這種情況下，可以關(guān)閉用戶的縮放屬性

總結(jié)

以上是生活随笔為你收集整理的不生效 设置了viewport_配置viewport的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。