第135天：移動端開發經驗總結

一、移動端三種布局

　　1、有最大、最小寬度的百分比自适應布局

　　适用場景：門戶網站首頁，圖檔較多的首頁。

　　2、百分比自适應布局

　　适用場景：資訊文字較多的網頁，内容較多網頁。

　　3、全屏自适應布局

　　适用場景：單頁面網頁，移動web app 頁面。

二 、Box-sizing在移動端的使用

　　在百分比定寬的頁面經常使用。

*,
::before,
::after{
    -webkit-box-sizing: border-box;
/*以你的border開始計算你的寬度*/
}      

三、 移動端事件

1、Touch

touchstart：當手指觸碰螢幕時候發生。不管目前有多少隻手指

touchmove：當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，

會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動

touchend：當手指離開螢幕時觸發

touchcancel：系統停止跟蹤觸摸時候會觸發。

例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

觸摸事件的響應順序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick  300ms延時

2、Event

originalEvent （原生事件） 是jquery 封裝的事件。

targetTouches 目标元素的所有目前觸摸

changedTouches 頁面上最新更改的所有觸摸

touches 頁面上的所有觸摸

clientX、clientY 相對于目前螢幕的X或Y位置

pageX、pageY 相對于整體頁面的X或Y位置

transitionEnd 過渡結束事件。

animationEnd 動畫結束事件

3、移動端事件架構

例如 zepto  touch.js

'swipe',

'swipeLeft',

'swipeRight',

'swipeUp',

'swipeDown',

'doubleTap',

 'tap',

'singleTap',

'longTap'

都是由我們的原生touch事件封裝的。

四、常見的移動端問題

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}      

2、 百度禁止轉碼

　　通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta标簽來禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />      

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>      

4、 移動端郵箱識别（Android）

　　與電話号碼的識别一樣，在安卓上會對符合郵箱格式的字元串進行識别，我們可以通過如下的meta來管别郵箱的自動識别：

<meta content="email=no" name="format-detection" />      

　　同樣地，我們也可以通過标簽屬性來開啟長按郵箱位址彈出郵件發送的功能：

　<a mailto:[email protected]">[email protected]</a>      

5、 ios系統中元素被觸摸時産生的半透明灰色遮罩怎麼去掉

        ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩。

{-webkit-tap-highlight-color: rgba(0,0,0,0;)}      

6、 webkit表單元素的預設外觀怎麼重置

.css{-webkit-appearance:none;}      

7、 禁止文本縮放

當移動裝置橫豎屏切換時，文本的大小會重新計算（或者在内嵌浏覽器中設定字型的大小），進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

html {

　　-webkit-text-size-adjust: 100%;

}      

8、移動端禁止選中内容

如果你不想使用者可以選中頁面中的内容，那麼你可以在css中禁掉：

.user-select-none {

  -webkit-user-select: none;

｝      

9、 如何禁止儲存或拷貝圖像（IOS）

通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像 或者拷貝圖像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：

img { -webkit-touch-callout: none; }      

10、搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。

11、 android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}      

12、移動端基礎架構

zepto.js

文法與jquery幾乎一樣，會jquery基本會zepto；

搭配

backbone underscore

http://daneden.github.io/animate.css/

  動畫css