最近項(xiàng)目中需要開發(fā)內(nèi)嵌的H5頁(yè)面甘桑，viewport不是很熟悉诡蜓，故來翻譯一下此篇文件加深理解
原文
配置viewport
IOS上的safari使用一種縮放的工作模式來展示pc端的網(wǎng)頁(yè)凶异，如果默認(rèn)的設(shè)置對(duì)你的網(wǎng)頁(yè)展示不友好，推薦你改變veiwport默認(rèn)配置漆改，開發(fā)IOS上使用的網(wǎng)頁(yè)朱转，你需要設(shè)置viewport译断，在html文檔中授翻，增加一行標(biāo)記來配置viewport，但是要理解viewport怎么對(duì)你的網(wǎng)頁(yè)展示還是很容易混淆孙咪，在配置viewport之前堪唐，你需要深度理解一下ios上的viewport
viewport是什么
在PC和IOS上瀏覽器的viewport有一些不太一樣
在IOS上的safari，沒有窗口翎蹈、滾動(dòng)條淮菠、調(diào)整窗口的按鈕見圖3-1，用戶輕彈手指來操作荤堪，用戶通過雙擊合陵、雙手捏開來放大，雙手捏緊來縮小澄阳，這些收拾在pc端是不支持的拥知，由于用戶有不同的操作方式來操作pc端和移動(dòng)端的頁(yè)面，所以viewport在pc端和移動(dòng)端表現(xiàn)不一樣碎赢，由于不一樣的表現(xiàn)低剔，所以相同的css和html也有不一樣的表現(xiàn)。
桌面的safari viewport
桌面瀏覽器的viewport是網(wǎng)頁(yè)的可視區(qū)域如圖3-2肮塞，如果頁(yè)面的寬度大于viewport襟齿，用戶可以通過縮放按鈕來縮放瀏覽器的viewport大小，用戶也可以控制滾動(dòng)條看到更多的頁(yè)面內(nèi)容枕赵，當(dāng)viewport變化猜欺，safari 也許會(huì)重新布局，比如會(huì)擴(kuò)充壓縮寬度是適配viewport拷窜，如果頁(yè)面寬度小于viewport开皿，那么剩余位置會(huì)填充剩余的空白
IOS上的viewport
在IOS上，viewport取決于內(nèi)容如何布局装黑、文本在頁(yè)面上的換行情況副瀑，viewport可能大于或小于可視區(qū)域，當(dāng)用戶在IOS上平移網(wǎng)頁(yè)時(shí)灰色條形顯示在屏幕的右側(cè)和底部恋谭，作為視覺反饋糠睡，向用戶顯示與視口相比可見區(qū)域的大小，用戶可以使用雙擊輕點(diǎn)疚颊、捏開狈孔、捏緊手勢(shì)來改變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
viewport meta tag
使用viewport meta標(biāo)簽來提高網(wǎng)頁(yè)的展示闰集，你可以設(shè)置viewport來這是默認(rèn)的寬度和初始化縮放值沽讹，例如，如果你的網(wǎng)頁(yè)比980更窄武鲁，你應(yīng)該設(shè)置寬度為你網(wǎng)頁(yè)內(nèi)容的寬度爽雄，如果你專門為iphone ipod開發(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
<meta name="viewport" content="width=device-width">
設(shè)置默認(rèn)縮放
<meta name="viewport" content="initial-scale=1.0">
改變viewport的寬度和高度
在IOS上纵揍，你有一個(gè)非常重要的任務(wù)就是去設(shè)置viewport的寬度去適配你的web程序內(nèi)容寬度，這樣來確保你的網(wǎng)頁(yè)在ios上看起來是正常的
如果你的網(wǎng)站必須要在980px下才能很好的適配议街，如果IOS上的safari不能設(shè)置980的viewport泽谨，只能左上角灰色的小塊能夠展示出來，這個(gè)默認(rèn)就不能展示頁(yè)面的所有內(nèi)容，這樣的話吧雹，你就需要設(shè)置meta去適配supported
如果頁(yè)面的寬度小于默認(rèn)的viewport寬度骨杂，那么頁(yè)面展示將如圖3-5左邊的圖片，現(xiàn)在設(shè)置viewport的寬度為頁(yè)面的寬度雄卷，此刻展示如圖3-5右邊搓蚪，為了實(shí)現(xiàn)右邊效果，你需要在你的html文件中的<head>增加如下代碼
<meta name="viewport" content="width=590">
iphone丁鹉、ipod觸屏設(shè)備上妒潭，web程序開發(fā)中，非常重要的是改變viewport的width為設(shè)備的寬度鳄炉，圖3-6展示了杜耙，設(shè)置viewport為divice-width是的效果
瀏覽器是怎么設(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è)置的值沒有生效，那么需要設(shè)置更多的值寸痢。
由于瀏覽器可以自動(dòng)推算寬度呀洲、高度、縮放比例啼止，那么用戶旋轉(zhuǎn)手機(jī)方向時(shí)道逗，viewport的視口發(fā)生變化，例如當(dāng)用戶通過旋轉(zhuǎn)設(shè)備從縱向更改為橫向時(shí)献烦，視區(qū)寬度可能會(huì)擴(kuò)大滓窍，僅有這種用戶行為可能引起viewport的重新計(jì)算，改變?cè)跒g覽器的布局巩那。
在iOS上吏夯，Safari的目標(biāo)是當(dāng)網(wǎng)頁(yè)完全縮小時(shí)，保持與任一方向上可見區(qū)域的比率相等的比率即横，使其適合可見區(qū)域噪生，這最好通過獨(dú)立設(shè)置視區(qū)屬性來說明，然后觀察其他viewport屬性對(duì)viewport影響东囚，下面一系列的例子來展示跺嗽，相同的web 內(nèi)容和不同viewport的設(shè)置相同影響。
圖3-7展示采用默認(rèn)寬度980px和沒有默認(rèn)縮放行為的 viewport，來一個(gè)web頁(yè)面的展示
圖3-8 設(shè)置了initial scale為1.0展示相同的web頁(yè)面抛蚁，瀏覽器去推算了width和height去適配了網(wǎng)頁(yè)可視區(qū)域展示陈醒，這個(gè)width被推算成了橫向時(shí)device-width，縱向時(shí)device-height
相似的瞧甩，如果你近設(shè)置了viewport的寬度钉跷，這個(gè)height和initial scale也會(huì)推算出來，圖3-9肚逸，展示phone設(shè)置viewport width為320時(shí)爷辙，縱向展示跟圖3-8一致，橫向展示的時(shí)候width等于device-width朦促，它改變了初始的比例膝晾，當(dāng)用戶改變到橫向時(shí)，它有放大的效果
圖3-10务冕，在設(shè)置viewport width一個(gè)小于可視區(qū)域的寬度200px血当，展示相同的頁(yè)面，網(wǎng)頁(yè)的viewport被設(shè)置了200px時(shí)禀忆，推斷高度和影響頁(yè)面第一次渲染的的initical scale
最后臊旭，圖3-11設(shè)置了width和initical scale值來展示相同頁(yè)面，瀏覽器保持可視區(qū)域兩個(gè)方向上相同比率的自動(dòng)推算了高度箩退，因此如果width設(shè)置為980离熏，initical width 為1.0 那么瀏覽器會(huì)推算出 手機(jī)橫置時(shí)為1091，縱置時(shí)為425
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)備開發(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，在開發(fā)web應(yīng)用程序時(shí)蘑拯，設(shè)置viewport的width 應(yīng)該是你的首要任務(wù)钝满，不需要用戶通過縮放來使用你的程序
如果設(shè)置來device-width，那么你的網(wǎng)頁(yè)展示如圖3-13所有申窘，用戶可以向下滑動(dòng)來看余下的網(wǎng)頁(yè)弯蚜，如果比可視區(qū)域更高
<meta name="viewport" content="width=device-width">
你也許不想用戶去縮放web程序，在這種情況下剃法，可以關(guān)閉用戶的縮放屬性
<meta name = "viewport" content = "user-scalable=no, width=device-width">
