h5页面中 iPhoneX 的一些适配问题

原创 吃草莓的小米子 随笔 iPhoneX 450阅读 2017-12-15 15:22:25 举报

参考链接:https://www.cnblogs.com/lolDragon/p/7795174.html

新出的iPhoneX又出现了创新,给我们前端工程师提出了新的挑战,现对一些出现的问题做下统计:

  1. 在css中做一些针对iPhoneX自己的适配的时候,有时候需要写一些iPhoneX独有的css样式:
    html 代码
  1. css constant()函数 与safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介绍
    在iOS 11中,包含了一个新的CSS函数constant(),以及一组四个预定义的常量:safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。当合并一起使用时,允许样式引用每个方面的安全区域的大小。
    注意:当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。

    当我们设置viewport-fit:cover时:设置如下
    html 代码

3.页面元素使用了固定定位的适配:

    子元素页面固定在底部时;使用viewport-fit:contain时;可以看到bottom:0时只会显示在安全区域内;
              要添加 html,body   {width:100%;heigth:100%},才能使手机下方圆角所在区域包含在内。

参考链接:https://www.cnblogs.com/lolDragon/p/7795174.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复