mobile_視口

document.documentElement.clientWidth       不包含滾動條

window.innerWidth                                            +滾動條

window.outerWidth                                            +瀏覽器邊框

window.width                                                     屏幕區域

 

IPhone 6 的 屏幕分辨率 爲 750*1334

IPhone 6 的尺寸 爲 4.7 英寸

IPhone 6 的 像素比 DPR 爲 2                              window.devicePixelRatio;

IPhone 6 的 獨立像素 爲 375*667                        window.innerWidth;

IPhone 6 的佈局(視口)像素爲 980*1743              document.documentElement.clientWidth

 

 

 

在普通的 PC 端，視口的默認寬度 與 瀏覽器的窗口寬度 一致

若是直接將 PC 端頁面 放到移動端，會是一個 壓縮的效果

• 移動端的瀏覽器廠商，都面臨一個問題

如何將 數以萬計 或者 數以億計 的 PC 端網頁 完整的呈如今移動端設備，而不會出現滾動條？

此時，移動端瀏覽器必須有一個容器，容器 規定 PC 端頁面 如何在移動端瀏覽器呈現

• 在 PC 端
  • 瀏覽器的視口 是小於屏幕的
• 在移動端
  • 瀏覽器的視口 是遠大於屏幕的獨立像素的

移動端瀏覽器廠商要實現的目標：

在小屏幕的移動設備上，儘量的縮小網站來讓用戶看到網站的全貌。

因而，移動端瀏覽器廠商，將 佈局視口 默認設置地比 手機屏幕 大，如 IPhone6 的佈局視口爲 980px

• 程序員兩種方案：
• 兩套頁面
• 響應式佈局

 

移動端的三個視口 

• layout viewport

佈局視口，即容器。用來裝 PC 端頁面的

• IPhone 6 的佈局視口像素 980
• 除了 黑莓 和 IE 是 1024，其餘大多都是 980

默認的佈局視口寬度 遠大於 屏幕的寬度

 

• 佈局像素
• 能夠經過 document.documentElement.clientWidth 獲取
• 佈局像素，是 css 像素
• 在 PC 端，單獨一個 width 爲 20% 的元素 最終拿到的值由 初始包含塊width（屏幕大小） 決定

PC 端中從 初始包含塊 開始盒子，而在移動端，是從 佈局視口 開始填盒子的

所以，必定程度上，能夠把移動端的 佈局視口 理解爲 初始包含塊

 

• visual viewport

視覺視口 與 設備屏幕的區域 同樣大

視覺視口的像素，是 css 像素，而且會隨着用戶的縮放而改變

視覺視口像素

能夠經過 window.innerWidth 獲取，可是在 Android 2 ，Oprea mini，UC 8 中沒法正常獲取

 

• viewport

據分析，佈局視口 的默認寬度並不是一個理想的寬度

• 理想視口，即用戶進入到頁面時，不須要進行縮放

這也是爲何蘋果和效仿蘋果的瀏覽器廠商 會引進理想視口

只有專門爲移動設備開發的網站，纔有 理想視口 一說。

 

• 不加 meta 理想視口標籤

物理像素    750

獨立像素    375

css 像素    980

像素比 DPR = 物理像素 / 獨立像素 = 750 / 350 = 2

• 優勢：
  • 等比現象，同一元素，在不一樣設備（屏幕）上，呈現的效果是同樣的。（???/980）
• 缺點：
  • 頁面元素小，文本小，用戶體驗差

• 只有在頁面中 加入 <meta name="viewport" content="width=device-width" /> 理想纔會生效

• 加上 meta 理想視口標籤：        佈局視口 = 視覺視口 = 理想視口

物理像素    750

獨立像素 = css 像素 = 375

像素比 DPR = 物理像素 / 獨立像素 = 物理像素 / css 像素 = 750 / 375 = 2

• 優勢：
  • 文本清晰呈現，用戶體驗較好
  • 像素體系鏈接起來了（DPR 爲 2 時，1 個 css 像素 = 多少物理像素？？？）
    • 不縮放    像素比 DPR = 物理像素 / 獨立像素 = 物理像素 / css 像素 = 750 / 375 = 2
    • 不縮放    1 個 css 像素 = 4 個物理像素
• 缺點：
  • 同一個元素，在不一樣設備（屏幕）上，呈現出的效果不一致（不等比現象，???/375    ???/414）
    • ----解決：適配。

 

• <meta name="viewport" content="佈局視口的寬=獨立像素的寬" />

<meta name="viewport" content="width=375" />

像這樣直接指定 具體數值，ios 會呈現出不理想效果

 

 

在 PC 瀏覽器，最乾淨的視口就是約束 css 佈局的視口，決定了用戶能看到什麼

移動設備上，視口分爲兩個：佈局視口限定 css 佈局，視覺視口決定用戶看到什麼

移動設備上，一旦加入 meta 標籤，就有了理想視口，對於特定設備上特定瀏覽器的佈局視口的一個理想尺寸