之前為公司商旅頻道寫移動(dòng)端的頁面時(shí)遇到不少問題，今特來個(gè)總結(jié)，希望能為后來者帶來一些幫助。

不再考慮瀏覽器兼容性

移動(dòng)端開發(fā)主要對(duì)象是手持設(shè)備，其中絕大部分是IOS和Android系統(tǒng)，so，在開發(fā)此類頁面時(shí)不必糾結(jié)IE和其他一些2B瀏覽器的兼容性，webkit是本次開發(fā)重點(diǎn)。

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

所以在開發(fā)時(shí)我們只需使用Chrome進(jìn)行調(diào)試即可，話說Chrome的開發(fā)者工具也是灰常不錯(cuò)的。

豐富的頁面Meta

控制顯示區(qū)域各種屬性：

<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 ? ? ? – 用戶是否可以手動(dòng)縮放

IOS中Safari允許全屏瀏覽：

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

IOS中Safari頂端狀態(tài)條樣式：

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

忽略將數(shù)字變?yōu)殡娫捥?hào)碼：

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

一般情況下，IOS和Android系統(tǒng)都會(huì)默認(rèn)某長度內(nèi)的數(shù)字為電話號(hào)碼，即使不加也是會(huì)默認(rèn)顯示為電話的，so，取消這個(gè)很有必要！

IOS中Safari設(shè)置保存到桌面圖標(biāo)：

這是IOS中Safari特有的meta，是在你保存某個(gè)頁面到桌面的時(shí)候使用這張圖作為桌面圖標(biāo)，so，尺寸和iphone上的一致，是57*57px

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

強(qiáng)大的CSS屬性box-flex

之所以將這塊作為大欄目來講，是因?yàn)檫@個(gè)屬性非常有用，和之前開發(fā)win8 app時(shí)的grid非常相似。

box-flex的作用是按百分比劃分兄弟相同標(biāo)簽的width，也就是當(dāng)ul里有個(gè)兩個(gè)li時(shí)，每個(gè)li會(huì)自動(dòng)劃分ul的寬度，如果box-flex:1;那么此時(shí)，li的width就是50%

box-flex用法實(shí)例1：

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

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

box-flex用法實(shí)例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>

?

轉(zhuǎn)載請(qǐng)注明：前端錄?移動(dòng)端Web開發(fā)小記

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=35-31-2"></script>

總結(jié)

以上是生活随笔為你收集整理的移动端Web开发小记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。