由于用戶瀏覽器分辨率分布、運營維護成本、全站頁面寬度規(guī)范等原因，2012年末一淘新首頁對1200px、990px、750px（for ipad）這3個尺寸的響應(yīng)不同布局，期望在ipad下橫屏顯示990px版本，豎版顯示750版本，iphone下顯示750版本。不同設(shè)備尺寸的不同 顯示自然少不了viewport設(shè)置，目前W3C針對viewport的規(guī)范還處于草案階段，有2種方式可以設(shè)置頁面的 viewport，viewport meta標(biāo)簽和@viewport css方式。
一、viewport meta element
<meta name=“viewport” content=“width=device-width，initial-scale=1.0”>
該viewport meta支持以下6個屬性，ios對viewport meta的實現(xiàn)對比W3C規(guī)范草案：
二、@viewport css
如：
@viewport { width： device-width; zoom： 2.0; }
w3c草案中@viewport 支持以下屬性
viewport meta方式和@viewport是可以相互轉(zhuǎn)化的，估計以后@viewport是要替代viewport meta的。如：
<meta name=“viewport” content=“width=480， initial-scale=2.0， user-scalable=1”>
可以轉(zhuǎn)化成以下css @viewport { width： 480px; zoom： 2.0; user-zoom： zoom; }
而且@viewport可以和media query聯(lián)用，天造地設(shè)的一雙呀，這樣可以針對不同的終端尺寸設(shè)置不同的viewport。
@viewport {
width： device-width;
} @media screen and （min-width： 400px） {
div { color： red; } }
@media screen and （max-width： 400px） {
div { color： green; }
}
不過，@viewport目前safari并不支持，Opera Mobile 11、ie10支持@viewport,但需要加私有前綴（-o-viewport、-ms-viewport），其他瀏覽器均不支持
ipad橫版990px
ipad豎版750px
ipad橫版
ipad豎版
iphone豎版
結(jié)果發(fā)現(xiàn)左右2邊都有大片的空白，原因是safari默認viewport的width是980px，js檢測當(dāng)前viewport確實是 980px,1200、990、750待響應(yīng)的三個尺寸在980的容器中，所以顯示出是750px的設(shè)計在980px的容器中居中的效果。 這不是想要的效果，眾所周知，ipad的分辨率是1024×768,所以其橫版能顯示990的設(shè)計效果，豎版顯示750的設(shè)計效果，既然viewport 的默認寬度是980，那就試試改變viewport的width。
ipad橫版
ipad豎版
iphone豎版
viewport設(shè)置成width=device-width后，不管橫版還是豎版viewport都是768px；理論上橫版的最大分辨率為 1024，并沒有顯示990px的效果。測試發(fā)現(xiàn)，device-height為1024px,device-width的寬度并不會隨著ipad橫向還 是豎向而改變，想要橫版viewport設(shè)置為device-height,豎版時設(shè)置為device-width，可以設(shè)置initial- scale,.
the same webpage when the initial scale is set to 1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area.The viewport width is set to device-width in portrait orientation and device-height in landscape orientation.
初始化不允許縮放設(shè)置后，并設(shè)置最大最小縮放比例，如果不設(shè)置，會導(dǎo)致橫版切換到豎版時，頁面出現(xiàn)橫向滾動條，因為被放大了，設(shè)置最大縮放比例后ipad下能達到預(yù)期中的效果：
ipad橫版 ipad橫版
ipad豎版
不過iphone下的就只能看到頁面左上角一小部分了，如何解決呢，繼續(xù)下面的問題 iphone
<meta name=“viewport” content=“initial-scale=1, maximum-scale=2, minimum-scale=1” /> 上面的設(shè)置ipad上顯示正常，因為initial-scale=1初始化的縮放比例是1，而iphone的此時的viewport width是320，所以只能顯示頁面左上角320×480的區(qū)域。 要實現(xiàn)iphone下面，全屏顯示750的效果，根據(jù)上面的測試，設(shè)置<meta name=“viewport” content=“width=device-width” />即可
如何實現(xiàn)不同設(shè)備不同viewport設(shè)置呢？
方法1：服務(wù)端加個user agent的判斷，如果是ipad就顯示上面特殊的meta設(shè)置。
但是服務(wù)端判斷user agent也有個缺點，不方便枚舉出所有平板電腦的user agent,平板電腦日新月異，維護這么多user agent也是個頭疼的事情，不過有個開源的機型庫wurfl，目前一淘無線的項目中也使用這個庫。
方法2：js判斷user agent，切換meta，這個不如服務(wù)端判斷好。
方法3：css @viewport，這是@viewport的天職;可惜safari還不支持。 針對一淘首頁這種情況，應(yīng)該針對小于750px的設(shè)備特殊設(shè)置@viewport即可
@media screen and （maxwidth 《 749px） {
@viewport {
width： device-width;
}
}
@viewport safari不支持，最后只能使用方法1在服務(wù)端判斷設(shè)置不同的viewport meta。
iphone下設(shè)置<meta name=“viewport” content=“width=device-width” />是期望中的效果
但是拖動到下面發(fā)現(xiàn)頁尾背景顯示不全
頁尾的實現(xiàn)大致如下：
<body>
<div id=“etao-footer”>
content
</div>
</body>
<style> #etao-footer {
background-color： #ccc;
}
</style>
The containing block in which the root element lives
is a rectangle called the initial containing block.
For continuous media， it has the dimensions of the viewport
and is anchored at the canvas origin; it is the page area
for paged media. The ‘direction’ property of the initial
containing block is the same as for the root element.
原因是沒有給etao-footer定寬，對于根元素下面的containing block其寬度由viewport的尺寸決定。 iphone下viewport為320，所以看到的效果是background-color只平鋪了320px的寬度，解決方法可以針對容器添加個 min-width:750px；所以viewport的設(shè)置可能會影響頁面根元素的寬度，需要注意下。
結(jié)束語
設(shè)備適配設(shè)置meta viewport相關(guān)屬性即可，不同設(shè)備適配需要服務(wù)端判斷user agent，更好的設(shè)置方式是@viewport，但是safari不支持，所以目前還是meta viewport方式靠譜，設(shè)置viewport后可能對頁面根元素寬度有影響。