移動web的適配問題

移動裝置螢幕尺寸不一樣，不同型號的手機會有不同大小的螢幕，不同型號的平板也是，就算是我們的pc端也是會有不同大小的螢幕。將在pc端寫好的餓頁面直接拿到移動端去顯示會是怎樣的？預設不會出現滾動條，但是會出現縮放。

解決方案：

在《京東**》移動站中用的是百分比自適應布局，也就是流式布局。同時，需要對移動端的viewport視口進行設定，就會達到適配的目的。

流式布局就是百分比布局，非固定畫素，內容會根據視窗的大小向兩側填充，可以理解成是流動的布局，這樣的布局稱為流式布局。

lang ="en" > > charset ="utf-8" > > 流式布局title > > body .box style > head > > class ="box" > 好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！好好學習天天寫**！寫好**去看李易峰！ div> body > html >

將pc端寫好的頁面怎麼展示在移動端？借助瀏覽器的手機模擬器。

viewport是移動端特有的，這是乙個虛擬的區域，用來承載網頁。pc端的頁面直接就承載在瀏覽器視窗裡面，而移動端多出了這樣乙個虛擬區域，用它來承載網頁。在移動端，它們之間的關係是：瀏覽器承載viewport，viewport承載網頁。

存在的問題：將寫好的頁面放在移動端顯示，會出現縮放的現象，之前的字型變小了，如何解決這個問題？---- 需要乙個適配方案。

適配要求：

網頁寬度必須和瀏覽器保持一致。

預設顯示的縮放比例要和pc端保持一致（縮放比例是1.0）

不允許使用者自行縮放網頁

滿足上述的要求，就達到了適配，是國際上通用的適配方案，標準的移動端適配方案。

適配設定

如果什麼設定都沒有，使用的就是viewport的預設設定，想要達到適配要求，就要去設定viewport。

name
="viewport"
>

書寫位置：在head裡面並且應該緊跟著編碼設定，是為了保證能夠優先載入。

viewport的功能

width可以設定寬度，height可以設定高度

initial-scale可以設定預設的縮放比例

user-scalable可以設定是否允許使用者自行縮放

maximum-scale可以設定最大縮放比例，minimum-scale可以設定最小縮放比例

name
="viewport"
content="
">

其中的content就可以使用以上引數。

name
="viewport"
content
="width=device-width, initial-scale=1.0, user-scalable=no"
>

表示這個viewport的寬度是裝置的寬度，預設的縮放比例是1.0，並且不允許使用者自動縮放。這個就是國際上標準的適配方案。建立標準適配方案的快捷鍵：meta:vp。

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

表示縮小一半。原網頁的寬度就是現在裝置寬度的2倍。

name
="viewport"
content
="width=device-width, initial-scale=0.3333333333, maximum-scale=0.3333333333, minimum-scale=0.333333333, user-scalable=no"
>

表示縮小到原來的1/3。原網頁的寬度就是現在裝置寬度的3倍。

以上是m.taobao.com在兩個不同的移動端裝置上的適配，為什麼比例不一樣？依據是什麼？螢幕畫素比。

非主流適配方案的特點：

頁面的真實尺寸會比在裝置上的尺寸要大幾倍。

比如：iphone4的裝置寬度是320px，則它的網頁尺寸是640px

縮放操作：有2倍的，有3倍的，這個倍數與螢幕畫素比有關係。

理解畫素：我們之前用的px指的是頁面的尺寸單位，而這裡說的螢幕畫素指的是物理畫素或者畫素點。物理畫素就是裝置顯示屏的最小可視顆粒的大小，現在有高畫質顯示屏，視網膜屏，retina屏，基本都是肉眼不可見了。這樣的情況下，顯示的效果提高了，但是在顯示同等質量的時會出現模糊效果。在高畫質顯示屏中可能會失真。

在螢幕畫素比高的裝置，（非向量）顯示會模糊。螢幕畫素比就是指：乙個px的寬度能夠放幾個物理畫素。這種非主流的適配方案就是為了提高網頁的清晰度，即根據螢幕畫素比來縮放網頁。但是這樣的適配方案非常高，一般使用的還是標準的適配方案。

移動web的適配問題

移動端web適配

移動web開發適配

移動web開發與適配

移動web的適配問題

移動端web適配

移動web開發適配

移動web開發與適配

相關推薦