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