博客
关于我
ios中safari浏览器100vh带有滚动条?
阅读量:156 次
发布时间:2019-02-28

本文共 337 字,大约阅读时间需要 1 分钟。

在移动端Safari或Chrome浏览器中,使用100vh可能会引起滚动条的出现,这通常与浏览器的地址栏高度计算方式有关。

在Safari和Chrome中,100vh的定义通常指的是去掉地址栏后的可用高度。这种设计导致页面内容在满屏显示时仍会出现滚动条,影响用户体验。

对于移动端开发,Chrome的用户基数较小,若只考虑微信公众号等特殊场景,通常无需特别处理。然而,如果需在Safari中优化用户体验,可以采取以下方法:

  • 使用100%替代100vh:这种方式在所有浏览器中都能稳定地实现满屏布局,无滚动条。

  • 结合JavaScript 代替vh单位:通过动态计算可用高度,并根据浏览器的具体实现调整布局。

  • 建议根据项目需求选择最合适的方案,确保在目标浏览器中的最佳显示效果。

    转载地址:http://pgad.baihongyu.com/

    你可能感兴趣的文章
    Notepad ++ 安装与配置教程(非常详细)从零基础入门到精通,看完这一篇就够了
    查看>>
    Notepad++在线和离线安装JSON格式化插件
    查看>>
    notepad++最详情汇总
    查看>>
    notepad如何自动对齐_notepad++怎么自动排版
    查看>>
    Notification 使用详解(很全
    查看>>
    NotImplementedError: Cannot copy out of meta tensor; no data! Please use torch.nn.Module.to_empty()
    查看>>
    Now trying to drop the old temporary tablespace, the session hangs.
    查看>>
    nowcoder—Beauty of Trees
    查看>>
    np.arange()和np.linspace()绘制logistic回归图像时得到不同的结果?
    查看>>
    np.power的使用
    查看>>
    NPM 2FA双重认证的设置方法
    查看>>
    npm build报错Cannot find module ‘webpack‘解决方法
    查看>>
    npm ERR! ERESOLVE could not resolve报错
    查看>>
    npm error Missing script: “server“npm errornpm error Did you mean this?npm error npm run serve
    查看>>
    npm error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装
    查看>>
    npm install digital envelope routines::unsupported解决方法
    查看>>
    npm install 卡着不动的解决方法
    查看>>
    npm install 报错 EEXIST File exists 的解决方法
    查看>>
    npm install 报错 ERR_SOCKET_TIMEOUT 的解决方法
    查看>>
    npm install 报错 fatal: unable to connect to github.com 的解决方法
    查看>>