.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%