一、移動端三種布局

1、有最大、最小寬度的百分比自適應(yīng)布局

適用場景：門戶網(wǎng)站首頁，圖片較多的首頁。

2、百分比自適應(yīng)布局

適用場景：信息文字較多的網(wǎng)頁，內(nèi)容較多網(wǎng)頁。

3、全屏自適應(yīng)布局

適用場景：單頁面網(wǎng)頁，移動web app 頁面。

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

在百分比定寬的頁面經(jīng)常使用。

*,

::before,

::after{-webkit-box-sizing:border-box;

/*以你的border開始計算你的寬度*/

}

三、?移動端事件

1、Touch

touchstart：當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指

touchmove：當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，

會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動

touchend：當(dāng)手指離開屏幕時觸發(fā)

touchcancel：系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。

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

觸摸事件的響應(yīng)順序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick300ms延時

2、Event

originalEvent(原生事件) 是jquery 封裝的事件。

targetTouches 目標(biāo)元素的所有當(dāng)前觸摸

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

touches 頁面上的所有觸摸

clientX、clientY 相對于當(dāng)前屏幕的X或Y位置

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

transitionEnd 過渡結(jié)束事件。

animationEnd動畫結(jié)束事件

3、移動端事件框架

例如zepto ?touch.js

'swipe',

'swipeLeft',

'swipeRight',

'swipeUp',

'swipeDown',

'doubleTap',

'tap',

'singleTap',

'longTap'

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

四、常見的移動端問題

1、什么是Retina 顯示屏，帶來了什么問題

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個變?yōu)?個

在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍。

那么，前端的應(yīng)對方案是：

設(shè)計稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2

//例如圖片寬高為：200px*200px，那么寫法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px

.css{font-size:20px}

2、?百度禁止轉(zhuǎn)碼

通過百度手機(jī)打開網(wǎng)頁時，百度可能會對你的網(wǎng)頁進(jìn)行轉(zhuǎn)碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標(biāo)簽來禁止它：

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

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

7位數(shù)字，形如：1234567

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

雙連接線的數(shù)字，形如：00-00-00111

11位數(shù)字，形如：13800138000

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

開啟電話功能

123456

開啟短信功能：

123456

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

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

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

dooyoe@gmail.com

5、?ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉

ios用戶點(diǎn)擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩。

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

6、?webkit表單元素的默認(rèn)外觀怎么重置

.css{-webkit-appearance:none;}

7、?禁止文本縮放

當(dāng)移動設(shè)備橫豎屏切換時，文本的大小會重新計算(或者在內(nèi)嵌瀏覽器中設(shè)置字體的大小)，進(jìn)行相應(yīng)的縮放，當(dāng)我們不需要這種情況時，可以選擇禁止：

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

}

8、移動端禁止選中內(nèi)容

如果你不想用戶可以選中頁面中的內(nèi)容，那么你可以在css中禁掉：

.user-select-none{-webkit-user-select:none;｝

9、?如何禁止保存或拷貝圖像(IOS)

通常當(dāng)你在手機(jī)或者pad上長按圖像 img ，會彈出選項(xiàng)存儲圖像 或者拷貝圖像，如果你不想讓用戶這么操作，那么你可以通過以下方法來禁止：

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

10、搖一搖功能

HTML5 deviceMotion：封裝了運(yùn)動傳感器數(shù)據(jù)的事件，可以獲取手機(jī)運(yùn)動狀態(tài)下的運(yùn)動加速度等數(shù)據(jù)。

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

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

12、移動端基礎(chǔ)框架

zepto.js語法與jquery幾乎一樣，會jquery基本會zepto；

搭配

backbone underscore

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

如有侵權(quán)，請聯(lián)系 support@oschina.cn 刪除。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。