某些網站圖片在iPhone上無法正常顯示

我開發了一個響應式網站，當我認爲它完美並準備啓動時，我發現主頁上的圖像無法在iPhone上正確顯示（我開發的該網站同時在Android上進行測試，所以直到現在我纔對智能手機有所瞭解）。圖像應該適合屏幕的寬度（我已經設置了最大寬度：100％;在它們上面），但是相反，它們被拉伸並像素化的方式超出了它們的實際分辨率。某些網站圖片在iPhone上無法正常顯示

奇怪的是，網站上任何其他頁面上的圖像都顯示得很好。我認爲這個問題的根源在於，主頁上的圖像實際上是通過CSS背景屬性設置的，而其他地方的圖像則設置在HTML中的<img>標籤中。因此，我在CSS文件中註釋了「背景」聲明，並在主頁上使用<img>標籤，就像在其他地方一樣。當我把它做到第一張圖像時，它表現出色。但是，只要我將其餘的圖像切換爲HTML格式，它們都會恢復到以前出現的醜陋狀態。

我的老闆（誰有權訪問一個iPhone）給我發了這個視頻（因爲道歉是失焦的，但你的想法）：https://www.youtube.com/watch?v=_vFJVZiBc3Q

第一四象他滾動過去應該都適合在摺疊之上，你只能看到實際圖像的左邊1/10，這就是它伸出的距離。

我在這裏沒有想法。有什麼特別的我需要爲iPhone做些什麼？使用<img>標籤，這些照片應與其他工作圖像的格式相同。

非常感謝！

來源

2014-09-01 Pete

和你的代碼是..... – Devin 2014-09-01 22:58:57

這是關於代碼！有很多東西需要檢查，比如viewport meta元素等。這就像得到醫生的診斷。你不會給他發一個視頻。 :-) – 2014-09-01 23:01:32

我玩過視口meta元素。目前它只是''，但是添加max-scale = 1.0並沒有解決任何問題。這是一個WordPress的網站，但我只是一直在玩HTML/CSS文件，並且據我所知，我在主頁中聲明「」的方式與我如何在主頁中聲明它們沒有區別該網站的其餘部分。我還有其他相關信息嗎？再次感謝！ – Pete 2014-09-01 23:55:28

事實證明，這是一個特定於我的問題。對於上述含糊不清的道歉，我真的不知道我在iPhone上應該尋找什麼。有問題的圖像包含在<div> s中，其中我以vh爲單位指定了一個高度。作爲任何人閱讀這篇文章的未來參考，你顯然不應該那樣做。將高度更改爲百分比單位解決了問題，並且它在Android和iPhone上都很棒！

來源

2014-09-02 06:54:43 Pete

某些網站圖片在iPhone上無法正常顯示

回答

相關問題