h5 默认为移动端页面_移动端页面踩坑一

1.背景色在ios中的兼容性，颜色发白

解决办法：加全局样式

input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

2.ios端按钮和输入框自带圆角问题：

解决办法：添加样式

-webkit-appearance : none ; /* 解决ios上按钮的圆角问题 */

border-radius: 0; /* 解决ios上输入框圆角问题 */

3.vue遮罩层阻止默认滚动事件(适用于遮罩层本身没有滚动事件的，否则本身的滚动事件也会被阻止)：@touchmove.prevent

4.h5页面点击元素会出现灰色背景、触摸元素时出现半透明灰色遮罩：

解决办法：添加样式

body {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

5.页面在ios上能正常上下滑动，而安卓上不行，pc端也不能滑动，但是通过鼠标滚动是可行的，这时候有可能是css文件中加入了touch-action:none导致的，这句代码作用是阻止页面滚动，将它去掉就好了。

6.ios上双击强制缩放问题：

解决办法：添加样式

*{touch-action: manipulation} // 该方法还能移除整个文档的触发延迟，对于IE10，需要使用-ms-touch-action

7.vue图片懒加载(vue-lazeload),不能动态切换图片(如，切换tab时，图片无法动态改变)

解决办法：添加唯一key

为每个img标签添加一个key属性。

8.使用translate导致元素内字体模糊：

问题：translate中的参数为非整数。常见于translateX(百分比)、translateY(百分比), translate(百分比,百分比)。

解决办法：translate中参数百分比其实是相对于操作元素本身的宽或高的百分比，所以可以调整所要操作的元素的宽或高，已达到百分比后的值是整数

9.App嵌入h5页面(使用vue)

问题：App端需要在页面跳转时拦截到跳转路径，使用vue的路由跳转方法时，App端是拦截不到的，因为vue是单页面应用，根本不存在页面的跳转。

解决办法：使用window.location.href方法跳转(注：如果当前页面使用window.location.href跳转，且路径中带有查询参数，在跳转后的页面中仍然可以使用this.$route.query来获取查询参数)

10.防止手机中网页放大和缩小

解决办法：设置meta中的viewport

11.apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行

说明：如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

12.format-detection---启动或禁用自动识别页面中的电话号码

说明：默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

13.H5调用安卓或者ios的拨号功能

解决办法：在a标签的href中添加tel:

10010

14.上下拉动滚动条时卡顿、慢

解决办法：添加样式

body {

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

15.禁止复制、选中文本

解决办法：添加样式

Element {

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

-----------------》》》