移動站適配學習記錄

標籤：瀏覽器   dea   學習   ble   螢幕尺寸   捲軸   images   前端   查看   

最近在學習移動前端開發的相關知識，在這裡做個記錄，方便以後查看。

一，視口的知識

布局視口(layout viewport)

它的作用是給css布局限制一個最大寬度；

布局視口尺寸可以通過document.documentElement.clientWidth/clientHeight擷取；

 

pc端

（1）螢幕尺寸

通過screen.width/height可以擷取顯示屏的寬和高；

 

（2）布局視口

在pc端，css布局視口等於瀏覽器視窗的內在尺寸。

瀏覽器視窗的內在尺寸通過window.innerWidth/Height擷取；window.innerWidth包含了捲軸的寬度；

在沒有捲軸的時候，通過window.innerWidth和document.documentElement.clientWidth值是一樣的；

 

移動端

（1）布局視口

瀏覽器廠商為了讓使用者在小螢幕下網頁也能夠顯示地很好，所以把布局視口寬度設定的很大，一般在 768px ~ 1024px 之間，最常見的寬度是 980px。

所以，在手機上，布局視口與移動端瀏覽器螢幕寬度不再相關聯，是完全獨立的，這個瀏覽器廠商定的視口被稱為布局視口。

 

（2）視覺視口（visual viewport）

在行動裝置端，視覺視口可以簡單的理解為裝置的物理螢幕的可視地區。它用來承載布局視口。

視覺視口的值是固定的，只和裝置的型號有關。它的大小和css像素值是相同的。比如：

　　iphone4 : 320*480px;

　　iphone6 : 375*667px;

 

（3） 理想視口（ideal viewport）

布局視口明顯對使用者是不友好的，完全忽略了手機本身的尺寸。所以蘋果引入了理想視口的概念，它是對裝置來說是最理想的布局視口尺寸。理想視口中的網頁對使用者來說，是最理想的寬度，使用者進入頁面的時候不需要縮放。

現在討論所謂的『最理想的寬度』到底是多少？其實，如果我們把布局視口的寬度改成螢幕的寬度不就不用縮放了麼。常見的可以如下設定viewport meta標籤；

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

width
用來定義layout viewport的寬度；在這裡，將device-width的寬度值賦給layout viewport；device-width即為裝置寬的css像素個數；如果不指定width屬性或者scale屬性，或者移除viewport meta標籤，則布局視口將恢複預設的值，如iphone為980px;

initial-scale
initial-scale用於指定頁面的初始縮放比例，也可以實現理想視口。如下，表示將布局視口按device-width的1倍縮放。即布局視口大小等於裝置寬度；

<meta name="viewport" content="initial-scale=1">

【參考文章：
http://blog.doyoe.com/2015/10/13/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%B8%80%E5%BC%B9%EF%BC%9Aviewport%E8%AF%A6%E8%A7%A3/
https://github.com/riskers/blog/issues/17
https://gold.xitu.io/entry/57d0cf732e958a005448f286
】

移動站適配學習記錄