移動web前端小結（一）

這段時間做了幾個移動項目的前端頁面，姑且稱之webapp。做這幾個項目之前根本沒接觸過移動端的相關知識，以為和PC端頁面沒啥區別無非就是尺寸小一點罷了。上手以后發現問題頗多。下面從框架、相關知識點、遇到的問題、解決辦法，以及依舊存在的困惑進行總結。因為剛接觸1個多月時間，多處不足，希望各位大神能為我解惑，拜謝~~

一、框架

框架：Bootstrap+HTML5 Boilerplate。

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

二、相關知識點

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

 

9.css中-webkit-overflow-scrolling: touch（允許獨立的滾動區域和觸摸回彈）

 

解釋：http://www.cnblogs.com/PeunZhang/p/3553020.html

 

 

 

待續……