1、click300ms延迟

  1. fastclick可以解决在手机上点击事件的300ms延迟
  2. 触摸事件的响应顺序为 touchstart --> touchmove --> touchend -->
    click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
  3. 若移动设备兼容性正常的话（IE/Firefox/Safari(IOS 9.3)及以上），只需加上一个meta标签
    把viewport设置成设备的实际像素，那么就不会有这300ms的延迟。
<meta name="viewport" content="width=device-width">
  1. 设置meta标签viewport属性，使其无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，从而达到能有统一的分辨率的效果。并且禁止掉用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"  viewport-fit=cover"/>
  • viewport-fit=cover设置是为了解决有些ios手机页面下方出现空白问题。

2、使用rem进行屏幕适配，设置好root元素的font-size大小，然后在开发的时候，所有与像素有关的布局统一换成rem单位。针对不同的手机，使用媒体查询对root元素font-size进行调整

3、阻止旋转屏幕时自动调整字体大小

  1. 移动端开发时，屏幕有竖屏和横屏模式，当屏幕进行旋转时，字体大小则有可能会发生变化，从而影响页面布局的整体样式，为避免此类情况发生，只需设置如下样式即可
{
   -webkit-text-size-adjust: none;
 }

4、修改移动端难看的点击的高亮效果，iOS和安卓下都有效

-webkit-tap-highlight-color: rgba(0,0,0,0);
  • 不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！
  • 一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。
pointer-events: none;

5、iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

6、ios 表单元素 input 和textarea 默认有内阴影

-webkit-appearance: none;

7、input或者textarea输入框，键入内容的时候所触发的事件

ios:input、oninput,比keyup,keydown 效果好
android:input或keyup都可以
  • 综合使用：input 或区分安卓和ios分别赋予方法 区分安卓、IOS
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
	return "ios";
} else {
	return "andriod";
}

8、禁止 iOS 识别长串数字为电话

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

9、禁止ios和android用户选中文字

-webkit-user-select: none;

10、取消在ios上自带的长按触发功能

-webkit-touch-callout: none;

11、calc的兼容处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

width: -webkit-calc(100% - 50px); 
width: calc(100% - 50px);

12、fixed定位缺陷

  • iOS下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位，android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位

13、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发 对不触发click事件的那些元素添加一行css代码

cursor: pointer;

14、消除transition闪屏问题

/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
 -webkit-transform-style: preserve-3d;
 /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/ 
 -webkit-backface-visibility: hidden;

15、CSS动画页面闪白,动画卡顿

  1. 尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
  2. 开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

16、iOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格

  • 通过正则去除
this.value = this.value.replace(/\u2006/g, '');

17、input的placeholder会出现文本位置偏上的情况

  • input
    的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决方案时是设置css
line-height：normal;

18、浮动子元素撑开父元素盒子高度

父元素设置为

overflow: hidden;

19、overflow-x: auto在iOS有兼容问题

解决方法

-webkit-overflow-scrolling: touch;

VUE移动端开发兼容问题

1、iOS原始输入法问题

中文输入时，无法触发keyup事件，且keyup.enter事件无论中英文，都无法触发

  • 1、改用input事件进行监听 2、将keyup监听替换成值的watch
    input的focus()、autofocus无效
    解决方案：
    1、原生方法解决。
    修改app的配置文件config.xml。ios的UIWebView
    默认的KeyboardDisplayRequiresUserAction为false，设置为true就行，WKWebView
    不支持这个属性。
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
  • 2、H5若是通过页面任何地方的点击事件使弹出的input框自动获得焦点。可以通过：this.$refs.refName.focus()。
    注意：此时input框不能是v-if或v-show动态控制的，可以设置为样式透明的透明度或z-index来控制。

2、