移动端 HTML5 页面常见问题

1. 数字键盘

<input type="number" />
<input type="number" pattern="[0-9]*" />
<input type="tel" />

效果对应下图
注意：单独使用type="number"时候，iOS上出现并不是九宫格的数字键盘，如果需要九宫格的数字键盘，可选择使用2、3的方法。 上面3种方法均可在Android上唤起九宫格的数字键盘。

2. 键盘显示“搜索”按钮

<form action="">
    <input type="search">
</form>

3. 去除textarea默认样式

• 去除右下角样式

  resize:none;
  

• 去除框外上下空白

  vertical-align: middle;
  

4. ios&&android系统

• 禁止ios和android用户选中文字

  -webkit-user-select: none;
  

• 禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片

  -webkit-touch-callout: none;
  

• webkit去除表单元素的默认样式

  -webkit-appearance: none;
  

• 修改表单输入框placeholder的样式

  input::-webkit-input-placeholder{color: #ccc;}
  input:focus::-webkit-input-placeholder{color: #333;}
  

• 去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景

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

• ios使用-webkit-text-size-adjust禁止调整字体大小

  body{-webkit-text-size-adjust: 100%!important;}
  

• android 上去掉语音输入按钮

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

• 取消input在ios下，输入的时候英文首字母的默认大写

  <input autocapitalize="off" autocorrect="off" />
  

• 打电话和发短信

  <a href="tel:0755-10086">打电话给:0755-10086</a>
  <a href="sms:10086">发短信给: 10086</a>