web app

*********Modernizr做爲開發HTML5必要的js工具************

Modernizr做爲開發HTML5必要的js工具

*********字體大小設 rem************
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

 

*********************

　　手機禁止放大： 

    <meta name="viewport" content="width=device-width,user-scalable=yes,minimun-scale=1.0,maximum-scale=1.0" />

*********************

 

除掉web app上的input 的默認樣式（如陰影，圓角等） 

-webkit-appearance:none;

 

以前爲公司商旅頻道寫移動端的頁面時遇到很多問題，今特來個總結，但願能爲後來者帶來一些幫助。

再也不考慮瀏覽器兼容性

移動端開發主要對象是手持設備，其中絕大部分是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       – 用戶是否能夠手動縮放

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">

通常狀況下，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>