iPad & iPhone 背景图像渲染问题

Question

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

自然看起来很糟糕，而且全是像素化的。在我的电脑上，我的 android phone 和 browserstack 模拟器上它出现了，因为它应该显示完整的图像。根据我的记忆，它还有一些布局问题，并且它的 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;
}

这是我的 phone...

应该是什么样子的图片

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

自然这似乎是所有 iPads 和 iPhones 的软件问题，我自然没有进行测试。如果您想亲自看看，网站是 https://www.liveatlevelone.com/

非常感谢任何帮助

Answer 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 使用纯色效果更好，但它可能适用于条形图。我不确定。

iPad & iPhone 背景图像渲染问题

iPad & iPhone background image rendering issue

css

iphone

background-image

render

ipad