前端 H5 适配 PC 样式错乱问题请教

182 天前
 qingshui33

环境:vue2 + vant2 + postcss-px2rem 来做的 H5 页面

需求:要将目前 H5 的页面适配 PC ,即在微信或者企微环境下打开 H5 的链接,页面样式要和 H5 的一致

做法:给整体添加 max-width 样式,然后将主体页面放在页面中间

问题:目前在微信或者企微打开 H5 的链接时,页面整体样式是错乱的,就向整体放大了一样,有的是某几个地方,有的是整体的页面,但是如果打开浏览器控制台或者调整浏览器窗口(放大或者缩小),这样页面样式就正常了,求各位哥们指教下这是怎么回事?

第一张图是部分放大 第二张图是整体都放大了

491 次点击
所在节点    前端开发
6 条回复
qingshui33
182 天前
第一张图片地址: https://imgur.com/B3ZWf6i
第二张图片地址: https://imgur.com/BYFEwvu
dsggnbsp
182 天前
菜鸡:‘但是如果打开浏览器控制台或者调整浏览器窗口(放大或者缩小)’应该是触发 resize 就好了 可以尝试 手动延迟调用一下 resize 打个补丁
dsggnbsp
182 天前
@dsggnbsp 俺是菜鸡
xiyuesaves
182 天前
rem 计算出错了,你估计用的是窗口宽度而不是容器宽度?
qingshui33
182 天前
@dsggnbsp #2 wc ,大哥,你简直神了,我下午也有想过这个方法来着,但是可能由于关键词没搜对,导致一直没结果,然后刚刚你提示后,我又搜了下,一下子就出来了 😂
qingshui33
182 天前
@xiyuesaves 有可能是这个原因,稍后我去看看,不过按照二楼的提示,这个问题是已经解决了😂

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1041708

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX