解决iponeX刘海全屏兼容问题

jscyl

于 2019-03-01 16:54:44 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：兼容性

本文链接：https://blog.youkuaiyun.com/jscyl/article/details/88063032

6 篇文章

订阅专栏

本文介绍了解决刘海屏设备上网页显示不全屏的问题，通过调整viewport元信息和添加特定CSS规则实现对iPhone X等设备的良好适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决刘海未全屏的问题 :

1.在 viewport 中添加 viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

此时本地不会报警告,上线后打开控制台会报

The key "viewport-fit" is not recognized and ignored.

解决方法 :

清空 meta 标签中的空格

2.添加配套 css 兼容

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

    html,body{height: 812px;

}