移动端兼容问题总结(1)

arashicage 发布于2019-08-30 11:21 / 802人阅读

摘要：原文地址键盘类型问题描述在上只需要更换即可更改键盘类型，无效。补充解决方式输入法顶起页面问题描述页面被输入法顶起，导致滚动，无法锁定解决方式在当前容器外层再包裹一层，使用来解决这个问题，做一个容器内滚动。

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

input 键盘类型问题

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

解决方法:

需要在表单元素外层增加

标签，才能生效

文本在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 字体的高度)

2019.07.11 记录

方式1，在使用2倍设计稿的情况下可能会失效。方式2会占用当前空间，可以设置 position: absolute 解决。

补充解决方式:

border-radius: 2px;
font-size: 10px;
padding: 2px 5px;
line-height: normal;
box-sizing: border-box;

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)

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

云服务器 GPU云服务器兼容支持webrtc的移动端 webrtc移动端兼容性如何解决兼容问题?Win11仅支持1个I MySQL授权问题总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114941.html

移动端兼容问题总结(3)

摘要：发布于蒙层点击滚动穿透问题描述移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式蒙层出现的时候，给底部被覆盖的滚动容器并设置。发布于：https://www.luoyangfu.com/art... 蒙层点击滚动穿透问题描述: 移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式:蒙层出现的时候，给底部被覆盖的滚动容器 position: fixe...

Pink 2019-08-02 15:38 评论0 收藏0
移动端兼容问题总结(3)

摘要：发布于蒙层点击滚动穿透问题描述移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式蒙层出现的时候，给底部被覆盖的滚动容器并设置。发布于：https://www.luoyangfu.com/art... 蒙层点击滚动穿透问题描述: 移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式:蒙层出现的时候，给底部被覆盖的滚动容器 position: fixe...

siberiawolf 2019-08-30 15:44 评论0 收藏0
移动端兼容问题总结(2)

摘要：发布于上使用等相对变量单位后，为椭圆描述根据网上解决方案设置为具体值即可。在移动端兼容问题解决如果有其他解决方案，请不吝赐教。发布于: https://luoyangfu.com/article... android 上使用 em,rem 等相对变量单位后，border-radius: 50% 为椭圆描述showImg(https://cdn-cos.luoyangfu.com/...

qpwoeiru96 2019-08-02 15:29 评论0 收藏0
移动端兼容问题总结(2)

摘要：发布于上使用等相对变量单位后，为椭圆描述根据网上解决方案设置为具体值即可。在移动端兼容问题解决如果有其他解决方案，请不吝赐教。发布于: https://luoyangfu.com/article... android 上使用 em,rem 等相对变量单位后，border-radius: 50% 为椭圆描述showImg(https://cdn-cos.luoyangfu.com/...

XanaHopper 2019-08-30 11:23 评论0 收藏0