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 。 該軟件將允許您創建看起來像真實事物的逼真圖像。 使用最好的軟件，您可以創建照片般逼真的圖像，讓您的客戶驚嘆不已。 您需要使用最好的渲染軟件來創建最好的圖像。 該軟件將允許您創建看起來逼真的圖像