一、移動端三種布局

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、onclick300ms延時

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標簽來禁止它：

3、移動端手機號碼識別(IOS)

在 iOS Safari (其他瀏覽器和Android均不會)上會對那些看起來像是電話號碼的數字處理為電話鏈接，比如：

7位數字，形如：1234567

帶括號及加號的數字，形如：(+86)123456789

雙連接線的數字，形如：00-00-00111

11位數字，形如：13800138000

可能還有其他類型的數字也會被識別。我們可以通過如下的meta來關閉電話號碼的自動識別：

開啟電話功能

123456

開啟短信功能：

123456

4、?移動端郵箱識別(Android)

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

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

dooyoe@gmail.com

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

本文同步分享在 博客“半指溫柔樂”(CNBlog)。

如有侵權，請聯系 support@oschina.cn 刪除。

本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。

總結

以上是生活随笔為你收集整理的android 手机号码去重,第135天：移动端开发经验总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。