标签：遮罩 fixed 滚动 适配 常见 像素 底部 遮挡 移动

一、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。