網頁如何縮小蘋果電腦網頁如何縮小 _經驗知識

（點擊上方公眾號，可快速關注）
作者：伯樂在線專欄作者 - risker
http://web.jobbole.com/90075/
作者：伯樂在線專欄作者 - risker
http://web.jobbole.com/90075/
要搞懂移動端的適配問題，就要先搞明白像素和視口。
像素
在移動端給一個元素設置 width:200px 時發生了什么？這里的px到底是多長呢？像素是網頁布局的基礎，但是我們一直在用直覺使用它。
其實存在兩種像素：
1. 設備像素
屏幕的物理像素，任何設備屏幕的物理像素的數量都是固定不變的，單位是pt 。
2. CSS像素
在CSS、JS中使用的一個抽象的概念，單位是 px 。
順便說下，CSS像素也可以稱為設備獨立像素(device-independent pixels)，簡稱為dips，單位是dp 。
順便說下，CSS像素也可以稱為設備獨立像素(device-independent pixels)，簡稱為dips，單位是dp 。
那么，我們現在再來說說一個元素 width:200px 以后會怎么樣。這個元素跨越了200個CSS元素，200個CSS元素相當于多少個設備像素取決于兩個條件：
頁面是否縮放
屏幕是否為高密度
頁面是否縮放
屏幕是否為高密度

文章插圖
這兩方面后面再解釋，先梳理一下手機硬件之間的關系，注意這里使用的都是物理像素。
展開全文
【網頁如何縮小蘋果電腦網頁如何縮小】以 iPhone5 為例，我們已知的是：
分辨率：1136pt x 640pt
指屏幕上垂直有 1136 個物理像素，水平有 640 個物理像素
屏幕尺寸： 4英寸

文章插圖
注意英寸是長度單位，不是面積單位。4英寸指的是屏幕對角線的長度。
屏幕像素密度：326dpi
屏幕像素密度（Pibel Per Inch）簡稱 ppi，單位是 dpi（dot per inch）。這里指屏幕水平或垂直每英寸有326個物理像素。原則上來說，ppi越高越好，因為圖像會更加細膩清晰。
ppi 是可以通過分辨率和屏幕尺寸計算得到的：
這個網站（https://www.sven.de/dpi/）列出了很多設備的分辨率和屏幕尺寸，并且計算了ppi 。
視口
桌面瀏覽器中，瀏覽器窗口就是約束你的CSS布局視口（又稱初始包含塊）。它是所有CSS百分比寬度推算的根源，它的作用是給CSS布局限制了一個較大寬度，視口的寬度和瀏覽器窗口寬度一致。
但是在移動端，情況就很復雜了。
布局視口
一個沒有為移動端做優化的網頁，會盡可能縮小網頁讓用戶看到所有冬西。這是我的手機查看博客園的樣子，你也可以在Chrome中以移動開發模式看到。
瀏覽器廠商為了讓用戶在小屏幕下網頁也能夠顯示地很好，所以把視口寬度設置地很大，一般在 768px ~ 1024px 之間，較常見的寬度是 980px 。
所以，在手機上，視口與移動端瀏覽器屏幕寬度不再相關聯，是完全獨立的，這個瀏覽器廠商定的視口被稱為布局視口。
布局視口我們是看不見的，只知道網頁的較大寬度是 980px，并且被縮放在了屏幕內。
可以這樣設置布局視口的寬度：
<meta name="viewport" content="width=640">
<meta name="viewport" content="width=640">
媒體查詢與布局視口
700px 指的是布局視口的寬度
@media (min-width: 700px){
...
}
@media (min-width: 700px){
...
}
document.documentElement.clientWidth/Height返回布局視口的尺寸
視覺視口
視覺視口是用戶正在看到的網頁的區域，大小是屏幕中CSS像素的數量。
window.innerWidth/Height返回視覺視口的尺寸

網頁如何縮小 蘋果電腦網頁如何縮小

網頁如何縮小蘋果電腦網頁如何縮小