移動端屏幕適配方案

本文來源：http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=201811994&idx=1&sn=1c3bae60e2fe13d3bc3aeecaa6a4ef00&scene=23&srcid=abqLbfgvESx4DGNysdG8#rd

 

pc上的網站在移動端上怎麼辦？

1：若是把移動端的可視區域(320-768)的話，大部分網站都會由於太窄而顯示錯亂；

2：因此瀏覽器默認把viewport設置爲一個較寬的值 980px或1024px，至少保證PC網站在移動端上能夠顯示，只不過出現了橫向滾動條而已。

 

幾個概念

1：css像素

html中度量的單位 用px來計算，在pc中每每 1 css px ＝ 1 物理像素

css像素時抽象和相對的了，在不一樣設備中1px對應不一樣的設備像素；iphone3分辨率是320*480 即 css 1px ＝ 1個物理像素；iphone4 分辨率640x960但屏幕尺寸沒有改變，意味着同一塊區域像素多了1倍 即 css 1px ＝2個物理像素；

 

2：物理像素

表示每英寸所擁有的像素數目，數值越高，表明屏幕可以以更高的密度來顯示圖像

 

3：分辨率

顯示器所能顯示的像素多少，顯示器能夠顯示的像素越多，畫面就越精細，一樣的屏幕區域能顯示的信息就越多

 

4：devicePixelRatio

window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2個物理像素

devicePixelRatio在不一樣瀏覽器中存在一些兼容性問題，並非徹底可靠的

 

5：layout viewport

移動設備的默認viewport,css佈局是以layout viewport 來作爲參考系計算的document.documenElement.clientWidth 獲取該尺寸時動態設置

 

6：visual viewport

表明瀏覽器窗口的尺寸，當用戶放大瀏覽器時這個尺寸就會變小window.innerWidth 獲取

 

7：ideal viewport

屏幕尺寸 設備屏幕的尺寸 單位是物理像素

screen.width 獲取 屏幕尺寸是不變的

在該viewport中用戶不須要縮放和橫向滾動就能夠正常查看網站的全部內容

設置移動端網站通常以這個viewport爲準,ideal viewport 的寬度等於設備屏幕寬度，使得不管在什麼分辨率下，那些針對ideal viewport設計的網站均可以完美的呈現給用戶。

 

如何來實現屏幕適配

須要用到

 <meta name="viewport" content="width=device-width" />

　　

meta viewport 中有6個通用屬性：

1）width 設置layout viewport的寬度 正整數或字符串 'width-device'

2）initial-scale 設置頁面的初始縮放值，數字或小數

3）minimum-scale 容許用戶的最小縮放值 數字或小數

4）maximum-scale 容許用戶的最大縮放值 數字或小數

5）height 設置layout viewport 的高度，這個屬性不多用到

6）user-scaleabel 是否容許用戶進行縮放 'no'或‘yes’ 還有2個須要特別注意的兩個屬性

7）target-densitydpi 在andriod 4.0一下的設備中，不支持設置viewport的width，android 自帶瀏覽器支持設置 target-densitydpi來達到目的；

target-densitydpi-UI-width/device-width*window.devicePixeRation*160

//UI-width：佈局寬度
//device-width:屏幕分辨率 iphone4爲640
//target-densitydpi=device-dpi 表示使用設備自己屋裏屏幕的像素，

 

miniual-ui ios的safari爲meta表天新增的屬性，在網頁加載是隱藏頂部的地址欄和底部的導航欄

 

橫豎屏

js代碼控制

window.addEventListener("orientationchange", function () {
this.isOrietation = true;
this.changeOriention();
});