1.1 移動web
1.1.1 三種布局
-
有最大、最小寬度的百分比自适應布局
适用場景：門戶網站首頁，圖檔較多的首頁。
-
百分比自适應布局
适用場景：資訊文字較多的網頁，内容較多網頁。
-
全屏自适應布局
适用場景：單頁面網頁，移動web app 頁面。
1.1.2 Box-sizing在移動端的使用
在百分比定寬的頁面經常使用。
*,
::before,
::after{
-webkit-box-sizing: border-box;
/*以你的border開始計算你的寬度*/
}
1.2 移動端事件
Touch
- touchstart：當手指觸碰螢幕時候發生。不管目前有多少隻手指
-
touchmove：當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，
會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
- touchend：當手指離開螢幕時觸發
-
touchcancel：系統停止跟蹤觸摸時候會觸發。
例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
觸摸事件的響應順序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick 300ms延時
Event
- originalEvent （原生事件） 是jquery 封裝的事件。
- targetTouches 目标元素的所有目前觸摸
- changedTouches 頁面上最新更改的所有觸摸
- touches 頁面上的所有觸摸
clientX、clientY 相對于目前螢幕的X或Y位置
pageX、pageY 相對于整體頁面的X或Y位置
- transitionEnd 過渡結束事件。
- animationEnd 動畫結束事件
移動端事件架構
例如 zepto touch.js
'swipe',
'swipeLeft',
'swipeRight',
'swipeUp',
'swipeDown',
'doubleTap',
'tap',
'singleTap',
'longTap'
都是由我們的原生touch事件封裝的。
1.3 常見的移動端問題
1.3.1 什麼是Retina 顯示屏，帶來了什麼問題
retina：一種具備超高像素密度的液晶屏，同樣大小的螢幕上顯示的像素點由1個變為多個，如在同樣帶下的螢幕上，蘋果裝置的retina顯示屏中，像素點1個變為4個。在高清顯示屏中的位圖被放大，圖檔會變得模糊，是以移動端的視覺稿通常會設計為傳統PC的2倍。
那麼，前端的應對方案是：
設計稿切出來的圖檔長寬保證為偶數，并使用backgroud-size把圖檔縮小為原來的1/2
//例如圖檔寬高為：200px*200px，那麼寫法如下
.css{width:px;height:px;background-size:px px;}
//其它元素的取值為原來的1/2，例如視覺稿40px的字型，使用樣式的寫法為20px
.css{font-size:px}
1.3.2 百度禁止轉碼
通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta标簽來禁止它：
1.3.3 移動端手機号碼識别（IOS）
在 iOS Safari （其他浏覽器和Android均不會）上會對那些看起來像是電話号碼的數字處理為電話連結，比如:
- 7位數字，形如：1234567
- 帶括号及加号的數字，形如：(+86)123456789
- 雙連接配接線的數字，形如：00-00-00111
- 11位數字，形如：13800138000
- 可能還有其他類型的數字也會被識别。我們可以通過如下的meta來關閉電話号碼的自動識别：
<meta name="format-detection" content="telephone=no" />
開啟電話功能
<a href="tel:123456">123456</a>
開啟短信功能：
<a href="sms:123456">123456</a>
1.3.4 移動端郵箱識别（Android）
與電話号碼的識别一樣，在安卓上會對符合郵箱格式的字元串進行識别，我們可以通過如下的meta來管别郵箱的自動識别：
<meta content="email=no" name="format-detection" />
同樣地，我們也可以通過标簽屬性來開啟長按郵箱位址彈出郵件發送的功能：
<a mailto:[email protected]">[email protected]</a>
1.3.5 ios系統中元素被觸摸時産生的半透明灰色遮罩怎麼去掉
ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩。
{-webkit-tap-highlight-color: rgba(,,,;)}
1.3.6 webkit表單元素的預設外觀怎麼重置
.css{-webkit-appearance:none;}
1.3.7 禁止文本縮放
當移動裝置橫豎屏切換時，文本的大小會重新計算（或者在内嵌浏覽器中設定字型的大小），進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：
html {
-webkit-text-size-adjust: %;
}
1.3.8 移動端禁止選中内容
如果你不想使用者可以選中頁面中的内容，那麼你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
｝
1.3.9 如何禁止儲存或拷貝圖像（IOS）
通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像 或者拷貝圖像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：
1.3.10 搖一搖功能
HTML5 deviceMotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。
1.3.11 android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
1.3.12 移動端基礎架構
zepto.js文法與jquery幾乎一樣，會jquery基本會zepto；
搭配
backbone underscore
http://daneden.github.io/animate.css/ 動畫css
![轉 Android WebView應用詳解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)