download:移動端架構師成長體系課：從零開始親自構建千萬級電商專案

 

移動端架構師

移動端普通工程師到架構師的全方位蛻變
全面掌握面向移動端未來的主流技術棧
從零開始親自構建千萬級電商專案，串聯移動架構師成長各階段

 

前為公司商旅頻道寫移動端的頁面時遇到不少問題，今特來個總結，希望能為後來者帶來一些幫忙。

不再考慮瀏覽器相容性

移動端開發首要物件是手持裝置，其間絕大部分是IOS和Android系統，so，在開發此類頁面時不必糾結IE和其他一些2B瀏覽器的相容性，webkit是本次開發要點。

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

所以在開發時我們們只需運用Chrome進行除錯即可，話說Chrome的開發者工具也是灰常不錯的。

豐富的頁面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       – 使用者是否可以手動縮放

IOS中Safari允許全屏瀏覽：

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

IOS中Safari頂端狀態條樣式：

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

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

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

一般情況下，IOS和Android系統都會默許某長度內的數字為電話號碼，即便不加也是會默許閃現為電話的，so，撤銷這個很有必要！

IOS中Safari設定儲存到桌面圖示：

這是IOS中Safari特有的meta，是在你儲存某個頁面到桌面的時分運用這張圖作為桌面圖示，so，尺寸和iphone上的一起，是57*57px

 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：

> >11111> >2222222> >333333333> >

ul{display: -webkit-box;} ul li{-webkit-box-flex: 1;}

閃現成果（需用webkit核瀏覽器檢查，如Chrome，下同）：

點此檢查例項展示

box-flex用法例項2：

 class="demo02">  placeholder="百分百寬度輸入框" type="text"> >

 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>

點此檢查例項展示

CSS3有用圖示收集