1. 首頁 > 生活百科 > >

網頁如何縮小 蘋果電腦網頁如何縮小( 二 )

生活百科經驗知識


理想視口
布局視口明顯對用戶是不友好的，完全忽略了手機本身的尺寸 。所以蘋果引入了理想視口的概念，它是對設備來說較理想的布局視口尺寸 。理想視口中的網頁用戶較理想的寬度，用戶進入頁面的時候不需要縮放 。
現在討論所謂的『較理想的寬度』到底是多少？其實，如果我們把布局視口的寬度改成屏幕的寬度不就不用縮放了么 ?？梢赃@樣設置告訴瀏覽器使用它的理想視口：
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width">
定義理想視口是瀏覽器的事情，并不能簡單地認為是開發者定義的，開發者只能使用 。
screen.width/height返回理想視口的尺寸，有嚴重的兼容性問題—可能返回兩種值：
理想視口的尺寸（下載瀏覽器）
屏幕的設備像素尺寸（內置瀏覽器）
Screen size tests和Understanding viewport可以測試你的設備的screen.width值，同一設備的不同瀏覽器返回的值可能是不一樣的 。這一情況主要發生在默認瀏覽器和下載瀏覽器（如UC、Chrome）之間 。
默認瀏覽器是安卓系統內置的瀏覽器，長下面那個樣子 。而且它使用的是Webkit而不是Blink 。只有在更新安卓系統的時候才能更新它 。直到安卓4.3，Google不再更新 。
而下載瀏覽器都返回的是理想視口尺寸 。
縮放
縮放與設備像素、CSS像素的關系
縮放是在放大或縮小CSS像素，比如一個寬度為 200px 的元素無論放大，還是200個CSS像素 。但是因為這些像素被放大了，所以CSS像素也就跨越了更多的設備像素 ?？s小則相反 。
縮放與視口
縮放會影響視覺視口的尺寸
頁面被用戶放大，視覺視口內CSS像素數量減少；被用戶縮小，視覺視口內CSS像素數量增多就行了 。這個道理應該是不難想的 。
用戶縮放不會影響布局視口
注意，這是『用戶縮放』，后面會說開發者設置縮放的情況
注意，這是『用戶縮放』，后面會說開發者設置縮放的情況
縮放比例
我們在開發者工具中可以在這里查看縮放比例：
這里的 0.3 是相對于理想視口的 。
在下載瀏覽器中，可以這么算（理想視口與視覺視口的比）：
zoom level = screen.width / window.innerWidth
zoom level = screen.width / window.innerWidth
禁止縮放
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="user-scalable=no">
設置縮放
<meta name="viewport" content="initial-scale=2">
<meta name="viewport" content="initial-scale=2">
使用initial-scale有一個副作用：同時也會將布局視口的尺寸設置為縮放后的尺寸 。所以initial-scale=1與width=device-width的效果是一樣的 。
完美視口
解決各種瀏覽器兼容問題的理想視口設置
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
設備像素比
在談到像素的時候，講到除了縮放，屏幕是否為高密度也會影響設備像素和CSS像素的關系 。
在縮放程度為100%（這個條件很重要，因為縮放也會影響他們）時，他們的比例叫做設備像素比(device pixel ratio)：
dpr = 設備像素 / CSS像素
dpr = 設備像素 / CSS像素
可以通過JS得到： window.devicePixelRatio
設備像素比也和視口有關：
dpr = 屏幕橫向設備像素 / 理想視口的寬
dpr = 屏幕橫向設備像素 / 理想視口的寬
總結
這一篇介紹了移動端適配需要掌握的知識，先說明了移動端存在的兩種像素，然后介紹了三種視口，由縮放對視口的影響引入理想視口，較后說明設備想告訴比 。下一篇介紹現在市面上的適配方案 。