之前為公司寫移動端的頁面時遇到不少問題,今特來個總結,希望能為后來者帶來一些幫助。
不再考慮瀏覽器兼容性
移動端開發主要對象是手持設備,其中絕大部分是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">
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable – 用戶是否可以手動縮放
OS中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">
一般情況下,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用法實例1:
<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用法實例2:
<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>
其他技巧
關閉Input鍵盤默認首字母大寫:autocapitalize=”off”