其他分享
首页 > 其他分享> > 移动端问题探索-2

移动端问题探索-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