移动端兼容问题总结1

原文地址: https://luoyangfu.com/article…

input 键盘类型问题

描述: 在 android 上只需要更换 type 即可更改键盘类型，ios 无效。

解决方法:

需要在表单元素外层增加 <form> 标签，才能生效

文本在 android 偏上问题

描述：在 android 上小于 12px 文本上下居中，android 文本显示偏上

设置字体为 11px，上下居中.

解决方式 1:

font-size: 22px;
padding: 10px 40px;
border-radius: 40px;
line-height: 22px;
zoom: 0.5;

解决方式 2：

font-size: 22px;
padding: 10px 40px;
border-radius: 40px;
transform: scale(0.5);
transform-origin: 0% 0%;

这里都是通过先放大，然后在缩小来解决这个问题(这里应该避免使用小于 12px 字体的高度)

ios 输入法顶起页面问题

描述：页面被输入法顶起，导致滚动，无法锁定

解决方式:

在当前容器外层再包裹一层，使用 position: fixed 来解决这个问题，做一个容器内滚动。

iconfont transform 相关操作无效

描述: rotate 一个角度无效

解决方法:

需要直接操作 iconfont::before 这个伪类，不能直接对 iconfont 操作

.icon::before {transform: rotate(90deg);
}

ios 下 document.execCommand(copy) 无效

在 ios 下直接使用 input.select() 这种方式无效需要采用下面方式:

input.setSelectionRange(0, data.length)

这种方式来选取文本的长度。