h5页面适配 iPhoneX

比眉伴天荒 2023-06-05 08:46 102阅读 0赞

h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识，下面分享两篇 网页适配 iPhoneX 的经典好文

网页适配 iPhoneX，就是这么简单
兼容iphone x * 刘海的正确姿势

使用 viewport-fit 和 env()、constant() 两种方法均能有效解决方案，可以根据项目的实际情况进行选择

为方便理解，另外贴上 mdn 上对 viewport-fit 的解释（反正对我而言都挺绕的）

viewport-fit 属性值
  • auto
    此值不影响初始布局视图端口，并且整个web页面都是可查看的。(注. 默认效果与 contain 一致)
  • contain
    视图端口按比例缩放，以适合显示内嵌的最大矩形。
  • cover
    视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。

发表评论

表情：
评论列表 （有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

    相关 h5页面适配 iPhoneX

    h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识，下面分享两篇 网页适配 iPhoneX 的经典好文 [网页适配 iPhoneX，

    比眉伴天荒比眉伴天荒/ 0 赞/ 103 阅读

    相关 h5手机适配

    现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。 通过一天的查找资料跟以前的经验，总结了以下的方案： 1：前端样式固定用320px宽度做

    怼烎@怼烎@/ 0 赞/ 382 阅读

    相关 网页适配 iPhoneX

    前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 289 阅读

    相关 vue h5适配

    vue h5适配(px自动转rem) 最近公司接手一个H5项目，重构后一直说我的页面有问题，后来发现前期公司搭建项目时没有做适配，后来通过查找资料，找到了一套如何将px自

    - 日理万妓- 日理万妓/ 0 赞/ 405 阅读

    相关 h5适配

    > H5页面开发适配方案，平时的一些小总结，希望能帮助到大家。 博客维护在git上，欢迎给一个star!!! https://github.com/mtonhuang/blo

    - 日理万妓- 日理万妓/ 0 赞/ 543 阅读