h5解决手机屏幕大小问题_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 6:29:24 共计：3591 浏览

h5解决手机屏幕大小问题？

在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例，如1/100)，之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！

例如：设计稿是640px，用js计算出来的根节点font-size是100px(证明此时屏幕宽度是640px)，那最外层的容器宽度就写成6.4rem(计算成像素也是640)，正常情况下是内容宽度就会和屏幕宽度一样。

然而某款华为手机、自带的浏览器下，最外层的容器宽度就会比屏幕宽度要宽，横向竟然可以滚动！

经过各种调试，找出了问题的根本，华为自带浏览器上rem单位计算不准！计算后的值比正确值大了。

然后开始想解决方案，当时想到了第一种方案，用css3把body整个缩小，比例就是华为浏览器上放大的比例，这样界面上看起来就正常了

实验过后发现这种方法可行，加班了半天、下班走人。但是随之带来了另外两个问题：

1、缩小后body的高度也缩小了，但是页面高度并没有缩小，所以页面底部会有一大片的空白区域。

2、使用css3的scale后，所有子元素的position:fixed全部失效，全部变成absolute了

so这个方案不行，第二天上班路上，突然灵机一动，想到了另一个方法：

1、计算出最外层容器是否大于屏幕宽度。2、如果大于、计算误差的比例。3、直接重置根节点的font-size！尼玛完美解决！！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。