viewport mata

2024-04-27 15:10:56

字體：大中小

來源：轉載

供稿：網友

轉載自：什么是viewport，為什么需要viewport

什么是viewport，為什么需要viewport

viewport：視口，視覺窗口，顯示區域。在顯示面積上手機屏幕相對桌面顯示器要小很多，在幾年前(現在也如此)大部分網站都是為桌面顯示器瀏覽而設計，很少考慮到適應手機屏幕，所以如果用手機瀏覽大多網站時會出現問題，比如常見固定寬度的網頁會出現橫向豎向滑動條，當然這不算什么大問題；但如果是瀏覽流動布局的網頁那情況會非常糟糕，設想一個寬度為30%的側邊欄對于320px手機屏幕而言也就96px，只能容納8個12px的漢字，可閱讀性非常差。為了讓手機也能獲得良好的網頁瀏覽體驗，Apple找到了一個辦法：在移動版(iOS)的Safari中定義了viewport meta標簽①，它的作用就是創建一個虛擬的窗口(viewport)，而且這個虛擬窗口的分辨率接近于桌面顯示器，Apple將其定位為980px②。

以一代iphone下的Safari來說就是：在iphone的320px物理屏幕上——視覺窗口(visual viewport)，創建出了一個980px的虛擬窗口——布局窗口(layout viewport)，在視覺窗口(visual viewport)中我們可以拖動橫向豎向滑動條或者放大縮小網頁，來達到最佳的瀏覽效果(類似桌面瀏覽器)；而布局窗口(layout viewport)用來配合CSS渲染布局，例如當我們設置一個容器的寬度為100%時，這個容器的實際值為980px而不是320px。如此一來大部分網頁就能以縮放的形式正常的顯示在手機屏幕上了。

如何設置viewport有了layout viewport似乎解決手機瀏覽網頁的難題，但如果遇到專門為手機優化的網頁就又有新的問題：

是的，因為iphone的layout viewport默認為980px，導致專為其優化的320px寬的頁面只能以縮放的方式顯示，這時就需要對viewport進行設置：

<head>…<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>…</head>
這個是最常見的一條viewport meta代碼，將viewport定義為：寬度為設備寬度，初始縮放比例為1倍，禁止用戶縮放。設置好后我們的頁面就顯示完美了：
viewport全部屬性&值如下：
width: viewport寬度height: viewport高度initial-scale: 初始縮放比例maximum-scale: 最大縮放比例minimum-scale: 最小縮放比例user-scalable: 是否允許用戶縮放
例：
width=960 或 device-widthheight=1000 或 device-heightinitial-scale=0.5maximum-scale=2minimum-scale=1user-scalable=1 或 0 (yes 或 no)
layout viewport的默認值在Apple實現viewport后，其他瀏覽器也加入了對viewport meta的支持，但彼此間還是有些差異，差異最大的是layout viewport的表現：
Safari iPhone: 980pxOpera: 850pxAndroid WebKit: 800pxIE: 974px
最后關注下width=device-width其實這個屬性&值很有意思，字面意應該是viewport寬度等于設備寬度，但在實際中不同的瀏覽器都給出了個定值：320px；這個值還是源于 Apple，因為早期iphone的分辨率為320px × 480px，大量為iphone量身定制的網站都設置了viewport:width=device-width，并且按照寬度320px來設計制作，所以其他瀏覽器加入viewport支持時為了兼容性也將device-width定義為了320px。
注解① 除此之外不同移動瀏覽器廠商也有不同的解決方案，例如UCweb就是使用中間件技術。②不同的瀏覽器廠商對于layout viewport的大小定義不同，詳見”layout viewport的默認值”。