V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qingshui33
V2EX  ›  前端开发

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

  •  
  •   qingshui33 · 188 天前 · 496 次点击
    这是一个创建于 188 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    6 条回复    2024-05-17 18:20:36 +08:00
    qingshui33
        1
    qingshui33  
    OP
       188 天前
    第一张图片地址: https://imgur.com/B3ZWf6i
    第二张图片地址: https://imgur.com/BYFEwvu
    dsggnbsp
        2
    dsggnbsp  
       188 天前   ❤️ 1
    菜鸡:‘但是如果打开浏览器控制台或者调整浏览器窗口(放大或者缩小)’应该是触发 resize 就好了 可以尝试 手动延迟调用一下 resize 打个补丁
    dsggnbsp
        3
    dsggnbsp  
       188 天前
    @dsggnbsp 俺是菜鸡
    xiyuesaves
        4
    xiyuesaves  
       188 天前 via Android
    rem 计算出错了,你估计用的是窗口宽度而不是容器宽度?
    qingshui33
        5
    qingshui33  
    OP
       188 天前
    @dsggnbsp #2 wc ,大哥,你简直神了,我下午也有想过这个方法来着,但是可能由于关键词没搜对,导致一直没结果,然后刚刚你提示后,我又搜了下,一下子就出来了 😂
    qingshui33
        6
    qingshui33  
    OP
       188 天前
    @xiyuesaves 有可能是这个原因,稍后我去看看,不过按照二楼的提示,这个问题是已经解决了😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3090 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:50 · PVG 20:50 · LAX 04:50 · JFK 07:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.