移動端頁面開發的兩種方式

時間 2019-12-09

標籤移動頁面開發兩種方式欄目無線简体版

原文原文鏈接

以前一直作的是web端，換工做以後重心變成了移動端，嘗試幾回以後總結了兩種移動端頁面的開發模式，能夠自適應各類屏幕大小。但願對你們有所幫助。\(▔＾▔)/css

1、使用meta標籤使網頁寬度自適應手機屏幕

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


在網頁的<head>中增長這句話，可讓網頁的寬度自動適應手機屏幕的寬度。

width=device-width ：表示寬度是設備屏幕的寬度 
initial-scale=1：表示初始的縮放比例 
minimum-scale=1：表示最小的縮放比例 
maximum-scale=1：表示最大的縮放比例 
user-scalable=no：表示用戶是否能夠調整縮放比例

利用這種方法來使網頁自適應手機屏幕以後，在頁面佈局中，css定義寬度的時候最好不要使用具體的值（例如xx px），而是應該使用百分比。ios

例如：web

就拿這個頁面中間的表格來講：服務器

最外層div是90%，居中，給兩邊留了邊距。裏面的表格相比於div寬度是100%，表格每行的第一個單元格是表格寬度的30%。佈局

這樣設置以後，無論移動設備有多大，表格都會隨着移動設備的寬度變化而增大/縮小，在每一個設備上看到的效果都是同樣的。字體

須要注意的是：這種方法下定義字體大小的時候，儘可能使用 em 或者 rem ，而不要使用 px 。 px 並不會隨着屏幕大小的變化而變化。spa

2、使用js對網頁進行縮放

這種方法與第一種方法不一樣的是：在開發過程當中，徹底不用考慮適配問題，不用使用百分比，甚至字體能夠直接使用px。這種方法是利用一段js代碼來對網頁進行等比縮放，能夠直接將頁面寬度寫死，而後根據 固定寬度 進行開發。scala

首先將下面這段js代碼放在要開發的頁面中。設計

1 function bodyScale() { 2     var devicewidth = document.documentElement.clientWidth; 3     var scale = devicewidth / 640; 4     document.body.style.zoom = scale; 5 } 6 window.onload = window.onresize = function () { 7  bodyScale(); 8 };

我公司的設計師通常給的設計稿是640的，因此我上面的代碼基數是640，在開發過程當中也是以640px的標準來開發的。若是設計師給的設計稿是其餘尺寸的，這裏作出相應的改變便可，沒有很大的影響。

一、最外層div，我直接固定寬度 640px 。

（須要注意的是，body後面的style="zoom:1.53125;"並非我寫上去的，這是由那段js代碼生成的。能夠直接忽略它。）

二、圖上面的表單，也是直接使用固定的寬度

label：

input：

(label) 90px + (input) 470px + (左邊距) 40px + (右邊距) 40px = 640px 剛恰好640px。

這種方式比較簡單，不用動腦，一段js代碼就搞定了。固然適配效果也很好，這裏就不貼圖了，demo已上傳服務器。

線上demo （純靜態頁面）

！！！須要注意的是，兩種方法不能混用。

以前開發的時候粗枝大葉，在使用第二種方法中的js以後，head標籤裏仍然寫了第一種方法裏的那段meta代碼。開發出來的頁面在安卓上沒有任何問題，可是在ios上查看的時候，頁面上字體大小會亂掉。以下：

安卓：

ios：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。