移动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;
}