響應式佈局下篇

開發移動端頁面

 

 

移動端的視口寬度問題

視口是指瀏覽器的可視區域，移動端的視口究竟是多寬呢？

如今市面上的大部分手機，好比iphone X，它的默認視口寬度爲980px，而一個iphone X的屏幕寬度僅僅爲375px。看到問題了嗎？一個寬度只有375像素的手機，卻可以顯示寬度爲980像素的網 頁，天然而然，網頁會被縮小。

 

 

咱們可使用谷歌瀏覽器的移動端調試工具，來訪問百度的搜索結果，能夠看到網頁明顯被縮小了，並且頁面寬度定格在980px。

 

 

 

面對這樣的狀況怎麼辦呢？咱們固然但願手機的視口寬度和實際的屏幕寬度保持一致，就像PC端那樣。好在HTML給了咱們設置移動端視口寬度的能力，只須要在 head 元素中加入 meta 元素，便可設置移動端視口寬度（默認980px），代碼格式以下：

 

 

然而，不一樣手機的實際寬度是不同的，並不全都是iphone X的尺寸（375px），這又如何處理呢？

好在HTML給咱們提供了一個關鍵字 device-width ，該關鍵是讀取當前移動設備的寬度。所以， 咱們只須要使用下面的代碼，便可讓全部移動設備的視口寬度和其自身的寬度相等。

 

 

這樣就解決了移動端視口寬度和自身寬度不一致的問題。

 

移動端誤觸形成的縮放問題

當用戶用手指在移動端滑動網頁的時候，手機每每提供下面的功能：

1. 快速雙擊，可放大頁面
2. 雙指收放，可放大縮小頁面

因爲移動端誤觸較多，而咱們的網頁原本就是專門爲移動端開發的，不管是尺寸仍是各類樣式，在默認的狀況下已經很是合適了，根本不須要用戶去縮放網頁（你會發現，幾乎全部app中的頁面， 都是不容許縮放的），所以，禁止用戶對網頁進行縮放是一個不錯的選擇。

具體的作法是在上一節中的 meta 元素中繼續加入內容：

 

 

在上面這句代碼中，出現了這一段代碼： initial-scale=1.0, minimum-scale=1.0, maximum- scale=1.0, user-scalable=0 ，它們的意思分別是：

 

initial-scale=1.0 ：初始縮放比例爲1.0（原始大小），這句代碼的目的還不是放置用戶縮放的，書寫上它有其餘複雜的緣由，不過本文不涉及

minimum-scale=1.0 ：網頁最小的縮小比例爲1.0（原始大小），設置這句代碼的目的是爲了放置某些程序（好比JS）無心中修改了網頁的縮小比例

maximum-scale=1.0 ：網頁最大的放大比例爲1.0（原始大小），設置這句代碼的目的是爲了放置某些程序（好比JS）無心中修改了網頁的放大比例

user-scalable=0 ：這句代碼纔是不容許用戶對網頁進行縮放

這樣一來，就解決了用戶誤觸的問題。

 

移動端元素的尺寸問題

咱們先看兩張移動端網頁的對比圖：

 

 

 

上面的對比圖，是同一個網頁在不一樣尺寸手機中的效果。仔細觀察，你會發現，網頁中的不少元素，隨着視口的寬度變大，尺寸也會隨之變大，不管是字體、高度、間隙都有這樣的特色。

這樣作的目的，是爲了保證網頁元素在不一樣尺寸的移動端中，顯示最優的尺寸。

這樣一來，就要求咱們在開發移動端的頁面時，當遇到字體大小、寬高、margin、padding等尺寸類的屬性時，不能設置固定的像素值。

不能設置像素值，那要設置什麼值呢？百分比嗎？

仔細思考，百分比也不行，好比字體設置爲百分比，就覺得着是相對於父元素的字體大小，只要父元素字體大小不變化，不管頁面視口是多寬，字體大小不會發生任何變化。並且百分比計算起來極其繁瑣，顯然不是合適的選擇。

考慮咱們的需求，咱們是要實現尺寸隨着視口寬度的變化而變化因而，聰明的開發者想出這樣一種辦法。

1.  首先，寫一段JS代碼，應用到網頁

 

 

 

 

 

替換以後，代碼就變成了這樣的格式：