记录移动端遇到的问题

前端 0 644 0
发表于: 2022-11-13 02:33:29

简介: 过去存在的问题,现在可能都遇不到了

.browserslist

如果只需要支持现代化的浏览器,那么可以设置 > 1%,否则我个人依然建议你使用 > 0.1%,以此来兼容ie以及一些市场占有率很低的浏览器(比如uc浏览器)

> 0.1%
last 2 version
not dead

ios的100vh问题

简单来说就是ios的100vh会包括底部的操作栏(前进后退)

https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

https://github.com/postcss/postcss-100vh-fix

css解决:-webkit-fill-available

js解决:在body挂载一个定位在底部的dom元素,然后取它的getBoundingClientRect().top值,这个值就是实际的可视高度

ios 端点击 input 会导致页面被放大

html 的 meta 标签的 content 里面添加 user-scalable=no

ios 端的 new Date()

这个其实也不是是移动端问题:new Date(‘2022-11-13 12:37:28’)可能会报错,需要替换为 new Date(‘2022/11/13 12:37:28’)

键盘遮挡输入框

移动端浏览器,安卓 12 里,chrome 浏览器,点击输入框,键盘抬起,会整个页面向上移动,触发 resize 事件

客户端 webview 里键盘挡住输入框的话可以让客户端那边做判断,客户端键盘抬起的时候客户端处理 webview 的高度。

如果是在 webview 里,基本无解,因为键盘是盖在 webview 上面的,因此 resize 事件不会生效。

如果发生了键盘遮挡页面,通用办法:focus 和 blur 控制底部的占位元素的显隐 或者 高度

https://www.jianshu.com/p/f5253b3ab100
http://www.alloyteam.com/2020/02/14265/
https://juejin.cn/post/7057444667238907934

1px 问题

这个其实不算是问题,可能是设计稿是 750px 的,里面的边框是 1px,然后我们写代码的时候也写 1px,结果就是看起来边框很粗,因为设计稿是二倍的,里面的 1px 其实是 0.5px,但是我们写了 1px,那看起来当然粗。但是一般我们都会使用插件进行转换成 vw 或者 rem,但是一般插件不会转换 1px 及以下的大小,因此我们需要手动画 0.5px 的边框,具体怎么画很多方法,常用的的画 1px,然后 scale 缩放 0.5 以及 transform-origin 移动 50%

JavaScript css

最后更新于:2023-01-15 16:19:26

欢迎评论留言~
0/400
支持markdown
Comments | 0 条留言
按时间
按热度
目前还没有人留言~