移动端问题探索-2

1.阻止旋转屏幕时自动调整字体大小

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

* {
  -webkit-text-size-adjust: none;
}

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

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

3.禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none;

4.禁止ios和android用户选中文字

-webkit-user-select: none;

4.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

针对此种情况只需要对不触发click事件的那些元素添加一行css代码即可

cursor: pointer;

5.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);

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

解决方法：通过正则去除

this.value = this.value.replace(/\u2006/g, '');

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

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

line-height：normal;

标签：translate3d,none,探索,iOS,transform,问题,webkit,input,移动
来源： https://www.cnblogs.com/zhouyideboke/p/11098883.html