移動端web開發技巧

 

常見問題

 

一、移動端如何定義字體font-family

 

三大手機系統的字體：

 

iOS 系統

 

1. 默認中文字體是Heiti SC
2. 默認英文字體是Helvetica
3. 默認數字字體是HelveticaNeue
4. 無微軟雅黑字體

 

Android 系統

 

1. 默認中文字體是Droidsansfallback

2. 默認英文和數字字體是Droid Sans

3. 無微軟雅黑字體

 

Winphone 系統

 

1. 默認中文字體是Dengxian(方正等線體)

2. 默認英文和數字字體是Segoe

3. 無微軟雅黑字體

 

各個手機系統有本身的默認字體，且都不支持微軟雅黑，如無特殊需求，手機端無需定義中文字體，使用系統默認英文字體和數字字體可以使用 Helvetica ，三種系統都支持。

 

* 移動端定義字體的代碼 */ body{font-family:Helvetica;}

 

二、移動端字體單位font-size選擇px仍是rem

 

1. 對於只須要適配手機設備，使用px便可
2. 對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

 

rem配置參考：

 

html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } }

 

三、移動端touch事件(區分webkit 和 winphone)

 

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

 

如下支持webkit

 

1. touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
2. touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
3. touchend——當手指離開屏幕時觸發
4. touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

 

如下支持winphone 8

 

1. MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
2. MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action:
   none;}能夠阻止默認狀況的發生：阻止頁面滾動
3. MSPointerUp——當手指離開屏幕時觸發

 

四、移動端click屏幕產生200-300 ms的延遲響應

 

移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。

 

如下是歷史緣由：

 

2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放 (double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速 雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

 

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

 

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是 單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則 瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有 多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講 是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。

 

解決方案：

 

1. fastclick能夠解決在手機上點擊事件的300ms延遲
2. zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

 

觸摸事件的響應順序

 

1、ontouchstart 2、ontouchmove 3、ontouchend 4、onclick

 

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應。

 

五、什麼是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}

 

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

 

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩。

 

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

 

七、部分android系統中元素被點擊時產生的邊框怎麼去掉

 

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果。

 

a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; }

 

-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符。

 

另外，有些機型去除不了，如小米2

 

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

 

八、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉

 

<meta name="msapplication-tap-highlight" content="no">

 

九、webkit表單元素的默認外觀怎麼重置

 

.css{-webkit-appearance:none;}

 

十、webkit表單輸入框placeholder的顏色值能改變麼

 

input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#E

 

十一、webkit表單輸入框placeholder的文字能換行麼

 

iOS能夠，Android不行~

 

1. 關閉iOS鍵盤首字母自動大寫

 

在iOS中，默認狀況下鍵盤是開啓首字母大寫的功能的，若是啓用這個功能，能夠這樣：

 

<input type="text" autocapitalize="off" />

 

13. 關閉iOS輸入自動修正

 

和英文輸入默認自動首字母大寫那樣，IOS還作了一個功能，默認輸入法會開啓自動修正輸入內容，這樣的話，用戶常常要操做兩次。若是不但願開啓此功能，咱們能夠經過input標籤屬性來關閉掉：

 

<input type="text" autocorrect="off" />

 

14. 禁止文本縮放

 

當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，當咱們不須要這種狀況時，能夠選擇禁止：

 

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

 

須要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 meta viewport。

 

15. 移動端如何清除輸入框內陰影

 

在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

 

input, textarea { 　　border: 0; /* 方法1 */ 　　-webkit-appearance: none; /* 方法2 */ }

 

16. 快速回彈滾動

 

咱們先來看看回彈滾動在手機瀏覽器發展的歷史：

 

1. 早期的時候，移動端的瀏覽器都不支持非body元素的滾動條，因此通常都藉助 iScroll;
2. Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能經過2個手指進行滾動；
3. Android 4.0解決了滾動條不可見及增長了快速回彈滾動效果，不過隨後這個特性又被移除；
4. iOS從5.0開始解決了滾動條不可見及增長了快速回彈滾動效果

 

在iOS上若是你想讓一個元素擁有像 Native 的滾動效果，你能夠這樣作：

 

 .xxx { overflow: auto; /* auto | scroll */ -webkit-overflow-scrolling: touch; }

 

PS：iScroll用過以後感受不是很好，有一些詭異的bug，這裏推薦另一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），並且還有回彈滾動的內置滾動條。iDangero官方地址： :www.idangero.us/swiper/#.VX_t9PmEB8Y

 

17. 移動端禁止選中內容

 

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

 

.user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移動端不須要） */ -ms-user-select: none; /* IE 10+ */ }

 

18. 移動端取消touch高亮效果

 

在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來進行全局的禁止：

 

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

 

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。

 

19. 如何禁止保存或拷貝圖像（IOS）

 

一般當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像 或者拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：

 

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

 

20.模擬按鈕hover效果

 

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下，

 

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue:active{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按鈕</div> <script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html>

 

兼容性ios5+、部分android 4+、winphone 8

 

要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名。

 

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按鈕</div> <script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){ this.className = "btn-blue" } </script> </body> </html>

 

21.屏幕旋轉的事件和樣式

 

事件

 

window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；

 

window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; } }

 

樣式

 

//豎屏時使用的樣式 @media all and (orientation:portrait) { .css{} } //橫屏時使用的樣式 @media all and (orientation:landscape) { .css{} }

 

22.audio元素和video元素在ios和andriod中沒法自動播放

 

應對方案：觸屏即播

 

$('html').one('touchstart',function(){ audio.play() })

 

23.搖一搖功能

 

HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。

 

24.手機拍照和上傳圖片

 

<input type="file">的accept 屬性

 

<!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*">

 

使用總結：

 

1. iOS有拍照、錄像、選取本地圖片功能
2. 部分android只有選取本地圖片功能
3. winphone不支持
4. input控件默認外觀醜陋

 

25.消除transition閃屏

 

.css{ /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-transform-style: preserve-3d; /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/ -webkit-backface-visibility: hidden; }

 

開啓硬件加速

 

1. 解決頁面閃白
2. 保證動畫流暢

 

 .css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

 

設計高性能CSS3動畫的幾個要素

 

1. 儘量地使用合成屬性transform和opacity來設計CSS3動畫
2. 不使用position的left和top來定位
3. 利用translate3D開啓GPU加速

 

26. android 上去掉語音輸入按鈕

 

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

 

META相關

1. 添加到主屏後的標題（IOS）

<meta name="apple-mobile-web-app-title" content="標題">

2. 啓用 WebApp 全屏模式（IOS）

當網站添加到主屏幕後再點擊進行啓動時，可隱藏地址欄（從瀏覽器跳轉或輸入連接進入並無此效果）

<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />

3. 百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：

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

百度SiteApp轉碼聲明：http://t.cn/R28wSBl

4. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在"apple-mobile-web-app-capable" content="yes"時生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 參數：

1. default ：狀態欄背景是白色。
2. black ：狀態欄背景是黑色。
3. black-translucent ：狀態欄背景是半透明。 若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。
   若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5.移動端手機號碼識別（IOS）

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

1. 7位數字，形如：1234567
2. 帶括號及加號的數字，形如：(+86)123456789
3. 雙鏈接線的數字，形如：00-00-00111
4. 11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：

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

開啓電話功能

<a href="tel:123456">123456</a>

開啓短信功能：

<a href="sms:123456">123456</a>

6. 移動端郵箱識別（Android）

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：

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

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app啓動動畫

因爲iPad 的啓動畫面是不包括狀態欄區域的。因此啓動圖片須要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小。

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏後的APP圖標

指定web app添加到主屏後的圖標路徑，有兩種略微不一樣的方式：

<!-- 設計原圖 --> <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png" rel="apple-touch-icon">

1. apple-touch-icon：在IOS6及如下的版本會自動爲圖標添加一層高光效果（IOS7開始已使用扁平化的設計風格）
2. apple-touch-icon-precomposed：使用「設計原圖圖標」

圖標尺寸：

可經過指定size屬性來爲不一樣的設備提供不一樣的圖標（但一般來講，咱們只需提供一個114 x 114 pixels大小的圖標便可 ）

官方說明以下：

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes. For iPhone and iPod touch both of these sizes are required: 57 x 57 pixels 114 x 114 pixels (high resolution) For iPad, both of these sizes are required: 72 x 72 pixels 144 x 144 (high resolution)

10. 優先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

11.viewport模板

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>標題</title> <link rel="stylesheet" href="index.css"> </head> <body> 這裏開始內容 </body> </html>

 

框架

1. 移動端基礎框架

1. zepto.js語法與jquery幾乎同樣，會jquery基本會zepto；
2. iscroll.js解決頁面不支持彈性滾動，不支持fixed引發的問題~ 實現下拉刷新，滑屏，縮放等功能；
3. underscore.js該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象；
4. fastclick加快移動端點擊響應時間
5. animate.css CSS3動畫效果庫

2.滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

1. slip.js
2. iSlider.js
3. fullpage.js

3.瀑布流框架

1. masonry

工具推薦

1. caniuse 各瀏覽器支持html5屬性查詢
2. paletton 調色搭配