iPad & iPhone 背景图片渲染问题

Question

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

自然它看起来很糟糕，而且都是像素化的。 在我的电脑上，我的 android 手机和 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;
}

这是我手机上应该是什么样子的图像......

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

自然，这似乎是所有 iPad 和 iPhone 的软件问题，我自然也没有进行测试。 如果你想看看自己的网站是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 ZC6E190B28E54633C3CCE8E3 页面。

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

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

Answer 2

那里有一些渲染软件程序，但并非所有的软件程序都是一样的。 您需要使用最好的渲染软件来创建高质量的图像。 我可以推荐你使用forgehub.net 。 该软件将允许您创建看起来像真实事物的逼真图像。 使用最好的软件，您可以创建照片般逼真的图像，让您的客户惊叹不已。 您需要使用最好的渲染软件来创建最好的图像。 该软件将允许您创建看起来逼真的图像