移動web前端小結（一）--摘自小鹿_同窗

1、框架

框架：Bootstrap+HTML5 Boilerplate。

兩個框架整合到一塊兒能夠看一下這位大神的文章：《使用 Bootstrap 和 HTML5 Boilerplate 開始一個項目》。

2、相關知識點

1.Meta標籤

控制顯示區域(在PC端也會用到)：

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

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

    IOS和Android系統會默認把必定長度內的數字辨認爲電話號碼,有時會引發誤操做.

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

 

2.link標籤

Safari保存到桌面圖標：

    經過設置apple-touch-icon標籤，添加到主屏幕的圖標就會使用咱們指定大小的圖片。

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> 
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />       

給WebApp加一個相似NativeApp的啓動畫面：

<link rel="apple-touch-startup-image" href="apple-touch-icon.png" />

 

3.字體圖標(Font Awesome)

下載地址：http://fontawesome.dashgame.com/很好的使用文檔。

 網頁（HTML）：

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"><!--圖標字體 V4.3.0-->

<i class="fa fa-camera-retro"></i> fa-camera-retro

效果：

 

 PS使用：

    字體包裏有FontAwesome.otf文件，安裝字體到電腦，重啓PS。

    到 http://fortawesome.github.io/Font-Awesome/cheatsheet/複製前面的圖標到ps。

    開始是這樣的改爲FontAwesome字體後

 

4.CSS3的-webkit-box

用於流式佈局父元素寬度被子元素均分。

例：父元素分別被分紅3:2:1

HTML代碼：
<article>
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：
.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

效果：

能夠參考這篇文章：http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/

 

5.橫豎屏切換字體變大問題（-webkit-text-size-adjust:none）

css代碼：

html{ 
height:100%;
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; 
text-size-adjust: 100%; /*避免字體被瀏覽器自動重置*/ 
font-size:62.5%;
}

 

6.CSS3新的字體單位（rem）

解釋：相對長度單位。相對於根元素(即html元素)font-size計算值的倍數。

用途：用em、百分比的時候計算大小很讓人頭疼，當嵌套的太多時我就會暈掉，轉而而用px，但是px是固定死的。由於rem的的參照點只有根元素，因此咱們能夠給根元素設置好合適的大小一切既搞定了。從 IE6 到Chrome根元素默認的font-size都是 16px（是這樣嗎？）。

css代碼：html{font-size:62.5%; /* 10÷16=62.5% */
}

根元素設置完（10px）以後：font-size:12px;等同於font-size:1.2rem ;

 

7.Buttons樣式

地址：http://www.bootcss.com/p/buttons/

8.CSS3動畫（all-animation.css）

一個Css3動畫的解決方案。

下載及演示地址：http://www.html580.com/?Ky37dClP

 

9.頁面手勢操做（hammer.js）

解釋：hammer.js是一款開源的移動端腳本框架，它能夠完美的實如今移端開發的大多數事件，如：點擊、滑動、拖動、多點觸控等事件。不須要依賴任何其餘的框架，而且整個框架很是小，在使用時很是簡單。

看這位大神的文章http://www.cnblogs.com/iamlilinfeng/p/4239957.html