移動端開發

開發移動端頁面

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

面對這樣的情況怎麼辦呢？我們當然希望手機的視口寬度和實際的螢幕寬度保持一致，就像pc端那樣。好在html給了我們設定移動端視口寬度的能力，只需要在 head 元素中加入 meta 元素，即可設定移動端視口寬度（預設980px），**格式如下：

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

好在html給我們提供了乙個關鍵字 device-width ，該關鍵是讀取當前移動裝置的寬度。因此，

我們只需要使用下面的**，即可讓所有移動裝置的視口寬度和其自身的寬度相等。

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

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

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

快速雙擊，可放大頁面

雙指收放，可放大縮小頁面

都是不允許縮放的），因此，禁止使用者對網頁進行縮放是乙個不錯的選擇。

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

minimum-scale=1.0 ：網頁最小的縮小比例為1.0（原始大小），設定這句**的目的是為了放置某些程式（比如js）無意中修改了網頁的縮小比例

maximum-scale=1.0 ：網頁最大的放大比例為1.0（原始大小），設定這句**的目的是為了放置某些程式（比如js）無意中修改了網頁的放大比例

user-scalable=0 ：這句**才是不允許使用者對網頁進行縮放

移動端元素的尺寸問題

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

上面的對比圖，是同乙個網頁在不同尺寸手機中的效果。仔細觀察，你會發現，網頁中的很多元素，隨著視口的寬度變大，尺寸也會隨之變大，無論是字型、高度、間隙都有這樣的特點。

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

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

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

仔細思考，百分比也不行，比如字型設定為百分比，就以為著是相對于父元素的字型大小，只要父元素字型大小不變化，無論頁面視口是多寬，字型大小不會發生任何變化。而且百分比計算起來極其繁瑣，顯然不是合適的選擇。

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

1.首先，寫一段js**，應用到網頁