iPad & iPhone 背景图片渲染问题答案

【问题标题】：iPad & iPhone background image rendering issueiPad & iPhone 背景图片渲染问题
【发布时间】：2022-01-07 10:09:00
【问题描述】：

我最近为一位新客户建立了一个网站，在他的 iPad 和 iPhone 上，它以奇怪的方式呈现背景图像。基本上它所做的就是从右上角获取一小部分实际图像（我会说大约 300px 宽度和 250ph 高度）并仅从 100% 宽度和 100vh 显示。

当然，它看起来很糟糕，而且都是像素化的。在我的电脑、我的安卓手机和浏览器堆栈模拟器上，它会出现，因为它应该显示完整的图像。据我记得看到它还有一些布局问题，他的 iPad 底部有一个滚动条。

我用来渲染图像的代码如下...

#fullHeightSection {
    width: 100%;
    height: 100vh;
    position: absolute !important;
    z-index: -1000 !important;
    background-image: url('/wp-content/themes/liveatlvlone/assets/barbg.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

这是我在手机上看到的样子...

我还请了一个有 iPhone 的朋友截图，这是他发给我的...

这似乎是所有 iPad 和 iPhone 的软件问题，我自然也没有用于测试。如果你想看看自己的网站是https://www.liveatlevelone.com/

非常感谢任何帮助

【问题讨论】：

标签： css iphone background-image render ipad

【解决方案1】：

我会创建 /wp-content/themes/liveatlvlone/assets/barbg.jpg 的多个资产

对于 iOS，您可以使用 @2x @3x @4x 等进行视网膜缩放。如果我没记错的话，我认为https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/ 适用于 Safari 网页。

您也可以尝试其他格式（如 PNG），我认为它会比 jpg（压缩）更好。

您可以尝试调整 JPG 压缩级别，或者选择 SVG 格式。 SVG 更适合纯色，但它可能适用于条形图。我不确定。

【讨论】：