移動web前端開發時注意事項

時間 2019-11-11

標籤移動 web 前端開發注意事項欄目無線简体版

原文原文鏈接

在智能手機橫行的時代，做爲一個web前端，不會編寫移動web界面，的確是件悲催的事情。當公司準備作一個微信的微網站時，做爲一個多年經驗的web前端碼農，我迷茫了，真心不知道從何下手。

接下來就是搜一堆教程，而後開始編寫代碼，三天後，個人第一個移動端web頁面編寫完成。

回頭想一想，移動端的web頁面代碼編寫遠沒有我想的那樣複雜（多是我作的這個項目比較簡單的緣故）。可是就入門來講，實際上是蠻簡單的，我把他總結爲一下幾個方面：特殊的meta標籤／百分百比佈局寬度／rem設置字體大小／css3的使用。

好吧，讓咱們開始吧，如下是移動web新手的淺見，老鳥請繞行，若有賜教不勝感激。

1.特殊的meta標籤；

由於如今咱們用的智能手機（iOS，Android）的瀏覽器都是基於webkit內核，這裏有一些針對webkit的特殊meta標籤，在開發移動端web是起到很重要的做用：

強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；

複製代碼

iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

複製代碼

iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

<meta content="telephone=no" name="format-detection" />

複製代碼css

告訴設備忽略將頁面中的數字識別爲電話號碼。

<meta content="email=no" name="format-detection" />

複製代碼html

Android中禁止自動識別頁面中的郵件地址，iOS中不會自動識別郵件地址；

（注：因爲webkit的瀏覽器對於html5的支持比較好，因此咱們在聲明頭部的時候最好用html5的聲明方式。固然若是你習慣了html4，那我只能告訴你，仍是先學學html5在接着看吧！）

2.百分百佈局；

拿到設計師的640px（以 iPhone4的比例作的設計稿）的設計稿後，我就嚴格的按照設計稿設置了各個模塊的高度／字號。接下來悲催的事情發生了，寫出來的頁面在手機上顯示的異常大。我傻了，這是嘛狀況！後來諮詢專業人士才瞭解到，雖然iphone4的分辨率是960x640px，可是其屏幕的像素密度比較高，它的實際大小應該是減半的。因此在寫代碼時一切的高度／字號都要是設計稿的1/2。接着說百分比佈局：

在作移動web頁面時，咱們要用百分比佈局來實現自適應屏幕寬度。有pc端web頁面開發經驗的同窗就會知道，元素的盒子模型（不清楚的同窗能夠去w3school上查查）。

那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎麼辦？

element{
width: 100%;
padding-left: 10px;
border: 1px solid blue;
}

複製代碼前端

這樣編寫代碼必然致使出現橫向滾動條，腫麼辦？要相信問題就是用來解決的。這時候偉大的css3爲咱們提供了box-sizing屬性，對於這個屬性的具體解釋不作贅述（想深刻了解的同窗能夠到w3school查看，要知道本身動手會更容易記憶）。讓咱們看看如何解決上面的問題：

element{
width: 100%;
padding-left: 10px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 1px solid blue;
}

複製代碼html5

好的，問題被解決了！

3. rem設置字體大小；

在這裏讓咱們花一些梳理一下css中的單位：px／em／rem（如下內容摘自 0101後花園）

px：就是css中最基本的長度單位了，用px作單位基本上沒什麼問題，能夠作到讓頁面按套路精確的展示。可是，（聽到可是的時候是否是忽然有些不適，就像每次開發的同窗喊個人時候，個人潛意識會告訴本身，壞了又出bug了！！）若是全篇用px佈局會暗藏一個問題，就是當用戶和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，所以有磚家倡導使用em替代px。

em：em是相對單位，em相對的基準點就是瀏覽器的字體大小（瀏覽器默認字體爲16px），因此1em默認等於16px。那麼14px＝0.875em; 公式是14/16=0.875em。用em來寫的話，就能夠解決ctrl+，ctrl-時形成的頁面錯亂問題。

但是，問題又來了，em準確的說是相對於父節點的字號來計算的，若是自身定義了字號那麼就相對自身字號來計算，舉例以下：

html { font-size: 100%; }
.box-0 {
height: 1em; /* 此時height等於16px */
}
.box-1 {
font-size: 0.625em; /* 此時基準字號以變動爲16*0.625=10px */
height: 1em; /* 此時實際height等於10px */
}

複製代碼css3

看明白了吧，1em並非一個固定不變的值，再加上數學是體育老師教的，這不是自做孽嗎。不要緊，css3爲咱們引入一個新的單位就是rem能夠解決這個問題。

rem：rem和em同樣也是一個相對單位，爲了方便理解，咱們就理解rem爲root em，顧名思義rem只相對跟節點<html>計算，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，默認 1rem=16px; 同理你能夠設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推 …（固然萬惡的ie678不支持rem，可是還好咱們在作的是移動端web頁面）

4.使用css3；

作這種高大上的移動web頁面怎麼能少的了css3。不過平時css3用的比較少，這裏記下幾個我在這個項目中用到的css3屬性。更深刻的親們本身去學咯。一樣，這裏不對屬性作贅述，放着強大的w3school不用，我只能對你說：藥不能停啊！：

A.圓角（這個太經常使用了）

element{
border: 1px solid blue;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

複製代碼web

B.漸變（這個在作按鈕的時候很經常使用）

element{
background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}

複製代碼瀏覽器

C.去掉手持設備點擊時出現的透明層（通常會在頭部作格式化）

a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}

複製代碼服務器

在應用了此屬性時，連接的 active屬性會實效，解決的方法是，在頁面unload時運行document.addEventListener("touchstart", function(){}, true);使active狀態可用。（注：在小米系統下，點擊連接仍然會出現紅色的邊框，各位同窗若有解決方法，請賜教，不勝感激。）

D.改變盒子模型（上面已講過）

element{
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

複製代碼微信

5.關於調試；

好了，有了上面的知識，咱們就能夠寫一個移動的頁面了。但不要太樂觀了，咱們要怎麼調試呢？難道每寫一個頁面就發一次服務器，而後用手機訪問測試環境！固然不須要那麼麻煩，若是是用pc機的同窗，能夠用一個本地localhost工具調試（此次就不要各位本身動手了，附送上我本身用的工具。用法很簡單，把全部的頁面放到一個文件夾中，頁面放在根目錄下，工具也放在跟目錄下，把你要調試的頁面改爲index.html。固然若是你有好幾個頁面，最好仍是作一個index頁面。啓動調試器，用手機訪問你電腦的ip，要保證手機所用的wifi和pc的網絡在一個網段）。用mac的同窗就到網上找一篇localhost的配置方法，開啓如下這個功能就能夠訪問了。

本文摘自http://www.w3cui.com/?p=359