<meta name="viewport" content="width=device-width,initial-scale=1.0">該viewport meta支持以下6個屬性，ios對viewport meta的實現對比W3C規范草案：
| 屬性 | safari的實現 | W3C規范草案 |
| width | 可視區域的寬度，默認是980px,取值區間[200,10000];ios 1.0及以上支持 | 可視區域的寬度，取值區間[1,10000] |
| height | 可視區域的高度，默認為根據設備的寬高比再根據寬度計算出，取值范圍為[223,10000];ios 1.0及以上支持 | 可視區域的高度，取值區間為[1~10,000] |
| initial-scale | 初始化縮放比例，默認根據可顯示區域適應頁面大小計算出的，取值區間為[minimum-scale，maximum-scale];ios 1.0及以上支持 | 初始化縮放比例，取值區間[0.1, 10] |
| minimum-scale | 最小縮放比例,默認0.25，取值區間為[>0,10];ios 1.0及以上支持 | 最小縮放比例,取值區間為[0.1, 10] |
| maximum-scale | 最大縮放比例,默認5.0，取值區間為[>0,10]；ios 1.0及以上支持 | 最大縮放比例,取值區間為[>0,10] |
| user-scalable | 是否允許用戶手動縮放,默認yes,不允許為no；ios 1.0及以上支持 | 是否允許用戶手動縮放,yes or no |
@viewport { width: device-width; zoom: 2.0; } w3c草案中@viewport 支持以下屬性
viewport meta方式和@viewport是可以相互轉化的，估計以后@viewport是要替代viewport meta的。如：
<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1"> 可以轉化成以下css @viewport { width: 480px; zoom: 2.0; user-zoom: zoom; } 而且@viewport可以和media query聯用，天造地設的一雙呀，這樣可以針對不同的終端尺寸設置不同的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），其他瀏覽器均不支持
結果發現左右2邊都有大片的空白，原因是safari默認viewport的width是980px，js 檢測當前viewport確實是980px,1200、990、750待響應的三個尺寸在980的容器中，所以顯示出是750px的設計在980px的容 器中居中的效果。 這不是想要的效果，眾所周知，ipad的分辨率是1024×768,所以其橫版能顯示990的設計效果，豎版顯示750的設計效果，既然viewport 的默認寬度是980，那就試試改變viewport的width。
viewport設置成width=device-width后，不管橫版還是豎版viewport都是768px；理論上橫版的最大分辨率為 1024，并沒有顯示990px的效果。測試發現，device-height為1024px,device-width的寬度并不會隨著ipad橫向還 是豎向而改變，想要橫版viewport設置為device-height,豎版時設置為device-width，可以設置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.
<meta name=“viewport” content=“initial-scale=1, maximum-scale=2, minimum-scale=1” /> 上面的設置ipad上顯示正常，因為initial-scale=1初始化的縮放比例是1，而iphone的此時的viewport width是320，所以只能顯示頁面左上角320×480的區域。 要實現iphone下面，全屏顯示750的效果，根據上面的測試，設置<meta name=“viewport” content=“width=device-width” />即可
方法1：服務端加個user agent的判斷，如果是ipad就顯示上面特殊的meta設置。
但是服務端判斷user agent也有個缺點，不方便枚舉出所有平板電腦的user agent,平板電腦日新月異，維護這么多user agent也是個頭疼的事情，不過有個開源的機型庫wurfl，目前一淘無線的項目中也使用這個庫。
方法2：js判斷user agent，切換meta，這個不如服務端判斷好。
方法3：css @viewport，這是@viewport的天職;可惜safari還不支持。 針對一淘首頁這種情況，應該針對小于750px的設備特殊設置@viewport即可
@media screen and (maxwidth < 749px) { @viewport { width: device-width; } } @viewport safari不支持，最后只能使用方法1在服務端判斷設置不同的viewport meta。
iphone下設置<meta name=“viewport” content=“width=device-width” />是期望中的效果
但是拖動到下面發現頁尾背景顯示不全
<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的設置可能會影響頁面根元素的寬度，需要注意下。
設備適配設置meta viewport相關屬性即可，不同設備適配需要服務端判斷user agent，更好的設置方式是@viewport，但是safari不支持，所以目前還是meta viewport方式靠譜，設置viewport后可能對頁面根元素寬度有影響。
新聞熱點
疑難解答
