移動端開發常見問題

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:100px;height:100px;background-size:100px 100px;}
其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px
.css{font-size:20px}

1.3.2 百度禁止轉碼
通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之噁心。不過我們可以通過這個meta標籤來禁止它：
<meta http-equiv="Cache-Control" content="no-siteapp" />

1.3.3 移動端手機號碼識別（IOS）
在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話鏈接，比如：
• 7位數字，形如：1234567
• 帶括號及加號的數字，形如：([phone]
• 雙連接線的數字，形如：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:[e-mail]">[email protected]</a>

1.3.5 ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就可以去除半透明灰色遮罩。
{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

1.3.6 webkit表單元素的默認外觀怎麼重置
.css{-webkit-appearance:none;}

1.3.7 禁止文本縮放
當移動設備橫豎屏切換時，文本的大小會重新計算（或者在內嵌瀏覽器中設置字體的大小），進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：
html {
　　-webkit-text-size-adjust: 100%;
}

1.3.8 移動端禁止選中內容
如果你不想用戶可以選中頁面中的內容，那麼你可以在css中禁掉：
.user-select-none {
  -webkit-user-select: none;
｝

1.3.9 如何禁止保存或拷貝圖像（IOS）
通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像 或者拷貝圖像，如果你不想讓用戶這麼操作，那麼你可以通過以下方法來禁止：
img { -webkit-touch-callout: none; }

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