iPhoneX适配问

```

html:


<div class="main">

你自己的页面内容

</div>

```

css

```

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

  .main{padding-top:44px;padding-bottom: 34px;}

  .main:before{content:"";display:block;position: fixed;width:100%;height:44px;background-color:#15d6ba;top:0;left: 0;z-index:9999;}

  .main:after{content:"";display:block;position: fixed;width:100%;height:34px;bottom:0;left: 0;z-index:9999;}

}

```

结果完美

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,907评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 11,086评论 2 2
  • 一个人在路上走呢
    035741阅读 1,796评论 0 0
  • 平平淡淡才是真 健康快乐就是福 七夕快到了,来个“七夕之约”吧,不管有无流星雨,我们一家人都会许下自己的愿望,然后...
    萍水相逢亦是缘阅读 1,391评论 0 4

友情链接更多精彩内容