Ios15 4更新后浏览器大黑边

Posted 2023-03-22

参考技术A 首先我们在桌面空白处单击右键，找到屏幕分辨率选项，点开。然后就会弹出屏幕分辨率设置界面，将分辨率调至推荐值当中的最高值。调节之后，点击确定选项，屏幕两边的黑边就会消失了。

ios兼容 iphoneX ios10 ios11

假设你有一个固定位置的标题栏，你的iOS10的CSS可能是这样写的：

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    padding-top: 20px; /* Status bar height */
}

 

为了自动调整iPhone X和其他iOS11设备，你可以在meta标签的viewport中添加viewport-fit="cover"：

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

 

然后通过CSS的constant()修改padding-top的值：

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    /* Status bar height on iOS 10 */
    padding-top: 20px; 

    /* Status bar height on iOS 11+ */
    padding-top: constant(safe-area-inset-top);
}

 

对于不知道如何解决constant()语法的旧设备来说，你可以做一个降级的处理。你可以使用CSS的calc()函数。也可以借用@supports来使用。

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    /* Status bar height on iOS 10 */
    padding-top: 20px;   
}

@supports (constant(safe-area-inset-top)) {
    header {
        /* Status bar height on iOS 11+ */
        padding-top: constant(safe-area-inset-top);
    }
}

 

原文: http://www.w3cplus.com/css/the-notch-and-css.html ? w3cplus.com