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

 

 

從技術層面上開講，縮放就是放大或者縮小 css 像素面積的過程

改變的是視覺視口的尺寸（放大操做，視覺視口變小，看到的東西變少）

移動端的縮放，沒有改變佈局視口的任何東西，改變的是視覺視口

佈局視口，視覺視口，理想視口 最終表明的都是屏幕的尺寸

在屏幕這一塊區域中，不一樣的視口 包含了不一樣個數的 css 像素 個數

 

IPhone 6  ，  理想視口 = 佈局視口 = 視覺視口 = 設備獨立像素 = 375

 

• 用戶縮放
• 佈局視口不變，視覺視口改變
• 系統縮放
• 佈局視口改變，視覺視口也改變

 

 

PC 端縮放

元素效果變大，元素具體像素值不變，css 像素的面積變大

 

移動端縮放        （縮放的是 佈局視口，一旦 width 和 initial-scale 產生衝突，老是大的那一個生效）

• 放大

css 像素 面積變大，元素像素值不變，

單個 css 像素的物理像素變多

視覺視口 中裝的 css 像素個數變少，視覺視口 變小

• initial-sscale        css 像素的面積的改變
  • 系統放大 2 ，佈局視口由 375 變成 187.5：    至關於景觀自己不變，人走近後視覺範圍變小，看到的景觀放大了
  • 系統縮小 0.5 ，佈局視口由345變成 750：    至關於景觀自己不變，人走遠，視覺範圍變廣，看到的景觀縮小了

 

• 縮小

css 像素 面積變小，元素的像素值不變

單個 css 像素 的物理像素變少

視覺視口 中 css 像素個數變多，視覺視口 變大