移动端适配常见坑
作者：互联网
一、iphoneX刘海和底部遮挡
问题：iphoneX的刘海会遮挡页面，底部的滚动条也可能会遮挡页面。横屏时除了左侧和右侧有遮挡，底部也有遮挡。
解决：给被遮挡处留出一小块空白区域。
实现：meta标签里content属性中添加viewport-fit=v=cover，
配合给body加上样式：
二、1px适配方案
三、图片模糊问题
问题：在电脑上1px的像素，呈现到手机时会根据设备像素比变成2px或3px,图片被放大了。
解决：准备不同大小的图片，根据设备像素比进行更换。
实现：
四、遮罩后的背景滚动
问题：在弹窗遮罩上滑动时，遮罩后面的背景在滚动。
解决：在遮罩出现时，给背景添加position:fixed; 高度设置为当前高度
五、键盘唤起时底部fixed的东西会跟着内容滚动
问题：键盘唤起时底部fixed的东西会跟着内容滚动。
解决：给内容添加overflow-y:scroll;限制只有内容滚动而不是整个页面滚动。
实现：
六、webApp操作
七、移动端默认样式
标签：遮罩,fixed,滚动,适配,常见,像素,底部,遮挡,移动 来源： https://blog.csdn.net/MiemieWan/article/details/118346068