WordPress圖像未在移動設備上顯示? 原因,修復,常見問題解答。

已發表: 2021-09-30

披露:這篇文章包含附屬鏈接。 當您單擊此帖子中的產品鏈接時,我可能會收到補償。 有關我的廣告政策的說明,請訪問此頁面 謝謝閱讀!

內容

  • 您的 WordPress 圖像未在移動設備上顯示或失真的一些常見原因。
  • WordPress 圖像未在移動設備上顯示。 原因和修復。
    • 插件或主題衝突。
    • 頁面構建器問題。
    • 缺乏主題更新。
    • 使用圖像優化插件。
    • 移動設備上的圖像與台式機上的圖像看起來不同。
    • WP Rocket 的問題。
  • WordPress 圖像未顯示在移動結論上。

您的 WordPress 圖像未在移動設備上顯示或失真的一些常見原因。

在這篇文章中,我們將討論我們遇到的一些最常見的原因,即為什麼您的 WordPress 圖像沒有顯示在移動設備上或變形。

請注意,這不是一個詳盡的列表,您可能應該檢查其他因素,例如您當前的主題或對它的更改,以及您當前的虛擬主機提供商可能存在的虛擬主機問題等。

但是,以下是我們遇到的最常見的原因,即為什麼您的 WordPress 網站圖像沒有顯示在移動設備上,或者如果它們出現了,它們可能會被扭曲:

  • 插件或主題衝突。
  • 頁面構建器問題。
  • 缺乏主題更新。
  • 使用圖像優化插件。
  • 移動設備上的圖像與台式機上的圖像看起來不同。
  • WP Rocket 的問題。

WordPress 圖像未在移動設備上顯示。 原因和修復。

插件或主題衝突。

在許多情況下,與 WordPress 相關的大多數問題一樣,這可能是插件衝突。

要檢查其他插件衝突,首先,禁用您網站上運行的所有插件。 然後切換到默認的“二十”主題。

如果問題消失,請一一啟用插件以確定問題的根源。 然後啟用您的主題。

為了使診斷更容易,請安裝插件Health Check

在其“疑難解答”選項卡上,您還可以單擊按鈕禁用所有插件並為您更改主題。 在您仍然登錄的情況下,不會影響正常流量,也不會影響您網站的訪問者。

頁面構建器問題。

如果您在編輯頁面中使用像 Elementor 這樣的頁面構建器,請檢查您是否已上傳用於移動響應的圖像。

您將在設置>>響應模式中的 Elementor 底部找到它:選擇移動視圖。 然後拖動您要顯示的圖像。

您也可以使用一些 CSS 來顯示它,但這不一定是最佳選擇。 但是,您可以嘗試一下:

將下面的 CSS 代碼添加到當前活動子主題的 style.css 文件中,或者您可以在主題的定制器中添加額外的 css 選項:

@media(最大寬度:767px){

.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {

顯示:塊;

}

}

如果您發現在修復移動問題後,當您將瀏覽器大小最小化到某個大小以上時,桌面瀏覽器上也會發生圖像消失的情況。

然後試試這個:

轉到“使用 Elementor 編輯頁面”,單擊部分>>高級>>響應並關閉隱藏在移動設備上的選項。 或者您可以將以下代碼添加到自定義>>自定義 CSS 部分來修復它:

@media(最大寬度:767px)

.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {

顯示:塊!重要;

}

缺乏主題更新。

如果您碰巧使用的是舊主題或不包含更新的免費主題,則未顯示在移動設備上的圖像可能與您的免費主題缺少更新以及常規 WordPress 核心更新或缺少一般的定期主題更新。

因此,將您的主題切換到 WordPress “Twenty” 一些默認主題,該主題會定期更新,應該確定問題是否與主題相關。

使用圖像優化插件。

如果您使用的是圖像優化插件,它可能會將您的圖像轉換為主題無法識別或不兼容的格式。

例如,Autoptimize 插件導致了一個問題,該插件將圖像轉換為.webp 格式以實現快速加載和其他功能。

.webp format 快速說明: .webp 格式您也可能遇到“延遲加載”插件的問題。

如果是這些或其他圖像優化插件,您可能想嘗試一些其他圖像優化插件,它們更兼容以加快加載時間。

移動設備上的圖像與台式機上的圖像看起來不同。

您的精選圖片在桌面上看起來不錯,但在移動設備上,圖片太大了,最終超出了帖子的預覽邊界。 如果是這種情況,您會希望它響應更快,以便適合頁面。

為此,您應該嘗試這個插件,看看它是否有幫助:

短像素自適應圖像

WP Rocket 的問題。

如果您最近購買了 WP Rocket 並希望它能加快您的網站速度,但發現您的圖像在移動設備上消失了,您需要在 WP Rocket 上查看此故障排除文檔以獲取一些潛在的快速修復:“我的網站已損壞”。

WordPress 圖像未顯示在移動結論上。

在大多數情況下,與 WordPress 的許多問題一樣,它可能只是歸結為插件和/或主題衝突。

開源很棒,因為它允許來自不斷尋求為用戶改進 WordPress 的富有創造力和認真的開發人員的各種貢獻。

但是,由於大量的主題和插件以及它們的編碼,不可避免地可能發生衝突。

但請放心,如果您知道它們是什麼,插件和主題衝突通常是最容易解決的。 通過使用上面的插件Health Check ,您幾乎可以很快找到任何衝突。

如果無法找到問題的根源,那麼列出的其他常見原因可能是導致您的 WordPress 圖像未顯示在移動設備上或失真的原因。

如果一切都失敗了,那麼您應該聯繫您的 WordPress 主題的開發人員或他們的支持人員,以從他們的角度縮小問題的範圍。