1、自適應(yīng)第一招

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

如果你發(fā)現(xiàn)自己做的網(wǎng)頁不能適配，看看是不是遺漏的這行代碼，initial-scale控制頁面的初始化縮放比，user-scalable控制網(wǎng)頁是否允許縮放。

2、IOS允許全屏瀏覽

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

3、忽略數(shù)字是電話號(hào)碼

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

4、去除Android對(duì)郵箱地址的識(shí)別

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

5、去除URL控件條

setTimeout(scrollTo,0,0,0);

6、禁止旋轉(zhuǎn)設(shè)備

No way，IOS和Android在瀏覽器里面沒法禁止瀏覽器旋轉(zhuǎn)。

7、關(guān)閉IOS鍵盤自動(dòng)大寫

我們知道在iOS中，當(dāng)虛擬鍵盤彈出時(shí)，默認(rèn)情況下鍵盤是開啟首字母大寫的功能的，根據(jù)某些業(yè)務(wù)場景，可能我們需要關(guān)閉這個(gè)功能，移動(dòng)版本webkit為 input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關(guān)閉鍵盤默認(rèn)首字母大寫。

8、iOS中如何徹底禁止用戶在新窗口打開頁面

-webkit-touch-callout:none;

9、IOS禁止用戶復(fù)制或者保存圖片

-webkit-touch-callout:none;

10、IOS禁止選中文字

-webkit-user-select:none

11、IOS獲取滾動(dòng)條高度

桌面瀏覽器中想要獲取滾動(dòng)條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會(huì)發(fā)現(xiàn)這兩 個(gè)屬性是未定義的，為什么呢？因?yàn)樵趇OS中沒有滾動(dòng)條的概念，在Android中通過這兩個(gè)屬性可以正常獲取到滾動(dòng)條的值，那么在iOS中我們?cè)撊绾潍@ 取滾動(dòng)條的值呢？

通過window.scrollY和window.scrollX我們可以得到當(dāng)前窗口的y軸和x軸滾動(dòng)條的值。

12、解決邊框溢出

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

13、輸入框獲取焦點(diǎn)后默認(rèn)彈出數(shù)字鍵盤

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

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

14、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;}

15、input type="password"自動(dòng)彈出數(shù)字鍵盤

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

?15、a標(biāo)簽出現(xiàn)藍(lán)色邊框

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

??15、手機(jī)調(diào)用攝像頭或照片

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

???16、手機(jī)鍵盤刪除鍵不會(huì)觸發(fā)keyup的問題

　　可以使用oninput事件

?

?17、文本框placeholder顏色　

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

?18、數(shù)字文本框顯示密碼樣式

<input type="tel" pattern="[0-9]*" inputmode="numeric"> input[type=tel] {-webkit-text-security: disc; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/hutuzhu/p/4565537.html

總結(jié)

以上是生活随笔為你收集整理的移动web开发都会遇到的坑（会持续更新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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