移動 Web 開發技巧

時間 2019-11-26

標籤移動 web 開發技巧欄目無線简体版

原文原文鏈接

第1、啓用 WebApp 全屏模式（IOS）

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

第2、加到主屏後的APP圖標

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

<!– 設計原圖 –>

<!– 添加高光效果 –>

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

第3、優先使用最新版本 IE 和 Chrome

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

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

如下支持webkit

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

如下支持winphone 8

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

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

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

如下是歷史緣由：

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

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

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接<a href=」#」></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。

那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。

解決方案：

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

觸摸事件的響應順序

一、ontouchstart

二、ontouchmove

三、ontouchend

四、onclick

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

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

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

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

第7、部分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標籤

第8、手機拍照和上傳圖片

<input type=」file」>的accept 屬性
<!– 選擇照片 –>
<input type=file accept=」image/*」>
<!– 選擇視頻 –>
<input type=file accept=」video/*」>

使用總結：

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

第9、消除transition閃屏

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

開啓硬件加速

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

.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動畫的幾個要素

儘量地使用合成屬性transform和opacity來設計CSS3動畫，
不使用position的left和top來定位

利用translate3D開啓GPU加速

第10、audio元素和video元素在ios和andriod中沒法自動播放

應對方案：觸屏即播

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

1、移動端手機號碼的識別

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

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

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

開啓電話功能

開啓短信功能：

2、移動端郵箱識別（Android）

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

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

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

3、百度禁止轉碼

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

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

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

content 參數：

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

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

三大手機系統的字體：

ios 系統

默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體

android 系統

默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體

winphone 系統

默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體

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

* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

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

對於只須要適配手機設備，使用px便可

對於須要適配各類移動設備，使用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 }}

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

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

如下支持webkit

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

如下支持winphone 8

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

8、移動端如何清除輸入框內陰影

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

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