移動web開發都會遇到的坑（會持續更新）

一、自適應第一招

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

若是你發現本身作的網頁不能適配，看看是否是遺漏的這行代碼，initial-scale控制頁面的初始化縮放比，user-scalable控制網頁是否容許縮放。

二、IOS容許全屏瀏覽

<meta content=」yes」 name=」apple-mobile-web-app-capable」 /> 

三、忽略數字是電話號碼

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

四、去除Android對郵箱地址的識別

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

五、去除URL控件條

setTimeout(scrollTo,0,0,0); 

六、禁止旋轉設備

No way，IOS和Android在瀏覽器裏面無法禁止瀏覽器旋轉。

七、關閉IOS鍵盤自動大寫

咱們知道在iOS中，當虛擬鍵盤彈出時，默認狀況下鍵盤是開啓首字母大寫的功能的，根據某些業務場景，可能咱們須要關閉這個功能，移動版本webkit爲 input元素提供了autocapitalize屬性，經過指定autocapitalize=」off」來關閉鍵盤默認首字母大寫。

八、iOS中如何完全禁止用戶在新窗口打開頁面

-webkit-touch-callout:none;

九、IOS禁止用戶複製或者保存圖片

-webkit-touch-callout:none;

十、IOS禁止選中文字

-webkit-user-select:none

十一、IOS獲取滾動條高度

桌面瀏覽器中想要獲取滾動條的值是經過document.scrollTop和document.scrollLeft獲得的，但在iOS中你會發現這兩 個屬性是未定義的，爲何呢？由於在iOS中沒有滾動條的概念，在Android中經過這兩個屬性能夠正常獲取到滾動條的值，那麼在iOS中咱們該如何獲 取滾動條的值呢？

經過window.scrollY和window.scrollX咱們能夠獲得當前窗口的y軸和x軸滾動條的值。

十二、解決邊框溢出

width:100%;
-webkit-box-sizing:border-box;

1三、輸入框獲取焦點後默認彈出數字鍵盤

<input type="tel" placeholder=""/>

記得使用type="tel"，而不是type="number"

1四、input type="number"去除上下箭頭

chrome下：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

firefox下：

input[type="number"]{-moz-appearance:textfield;}

1五、input type="password"自動彈出數字鍵盤

<input type="password" pattern="[0-9]*" maxlength="6" inputmode="numeric" name="password">

 1五、a標籤出現藍色邊框

*{     
  
    -webkit-tap-highlight-color: transparent;  
    -webkit-appearance: none;  
}

  1五、手機調用攝像頭或照片

<input type="file" accept="image/*" capture="camera">

   1六、手機鍵盤刪除鍵不會觸發keyup的問題

　　可使用oninput事件

 

 1七、文本框placeholder顏色　

textarea::-webkit-input-placeholder，input::-webkit-input-placeholder{
font-size: inherit;
color: #ccc;
}

 1八、數字文本框顯示密碼樣式

<input type="tel" pattern="[0-9]*" inputmode="numeric">

input[type=tel] {
    -webkit-text-security: disc;
}