移動端Web開發注意點

標籤：

不用考慮瀏覽器安全色性

移動端開發主要對象是手持功能，其中絕大部分是IOS和Android系統，so，在開發此類頁面時不必糾結IE和其他一些2B瀏覽器的相容性，webkit是本次開發重點。

當然，不同版本的Android是存在一些問題的，還有就是不同瀏覽器的版本也存在一些差別，IOS在這方面表現甚好。

所以在開發時我們只需使用Chrome進行調試即可，話說Chrome的開發人員工具也是灰常不錯的。

豐富的頁面Meta

控制顯示地區各種屬性：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

• 移動端Web開發注意點width                      – viewport的寬度
• height                     – viewport的高度
• initial-scale          – 初始的縮放比例
• minimum-scale  – 允許使用者縮放到的最小比例
• maximum-scale – 允許使用者縮放到的最大比例
• user-scalable       – 使用者是否可以手動縮放

IOS中Safari允許全屏瀏覽：

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari頂端狀態條樣式：

<meta content="black" name="apple-mobile-web-app-status-bar-style">

忽略將數字變為電話號碼：

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

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

 

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

一般情況下，IOS和Android系統都會預設某長度內的數字為電話號碼，即使不加也是會預設顯示為電話的，so，取消這個很有必要！

IOS中Safari設定儲存到案頭表徵圖：

這是IOS中Safari特有的meta，是在你儲存某個頁面到案頭的時候使用這張圖作為案頭表徵圖，so，尺寸和iphone上的一致，是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

強大的CSS屬性box-flex

之所以將這塊作為大欄目來講，是因為這個屬性非常有用，和之前開發win8 app時的grid非常相似。

box-flex的作用是按百分比劃分兄弟相同標籤的width，也就是當ul裡有個兩個li時，每個li會自動劃分ul的寬度，如果box-flex:1;那麼此時，li的width就是50%

box-flex第一種用法執行個體：

<ul>     <li>11111</li>     <li>2222222</li>     <li>333333333</li></ul>ul{display: -webkit-box;}ul li{-webkit-box-flex: 1;}

 

 

顯示結果（需用webkit核瀏覽器查看，如Chrome，下同）：

 

box-flex第二種用法執行個體：

<div class="demo02">    <input placeholder="百分百寬度輸入框" type="text"></div><style type="text/css">.demo02{display: -webkit-box;}.demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}</style>

 

從萬惡的群主那邊坑點文章，堅決不做low貨！

 

移動端Web開發注意點