網站內容被切斷和布局問題

Question

首先，我會說我已經在所有StackExchange網站上潛伏了一段時間，現在我遇到了我遇到的第一個問題。

我正在一個真實的網站上工作- 美麗和充裕 -一切都可以在我的台式機和平板電腦上正常運行，但是當我將其放在手機（三星Galaxy S3）上時，會遇到各種麻煩。

屏幕截圖顯示了在手機上看到的着陸情況。 很好（盡管有一些糟糕的故障排除布局）。 第二張圖片顯示側邊欄伸出，這是嘔吐的第一個區域。 邊欄為235px寬，我的手機的顯示分辨率為360px寬。 做一些簡單的數學運算，側邊欄應該占我屏幕的65.27（當然是重復的）百分比。 不幸的是（如圖所示），它僅占據了屏幕的三分之一，更不用說文本比我設定的要小得多了。

關注的第二個領域（也是最重要的）是移動設備上的內容已被切斷。 如第三個屏幕截圖所示，這一切都突然結束了。 我不明白 我以前從未遇到過這個問題。

該網站是基於WordPress構建的，但是我不認為這是特定的WP問題，這就是為什么我在這里發布而不是在WordPress答案上。 如果我要張貼在那兒，請讓我知道，我很樂意將其移動。

我通常會一遍又一遍地做一些事情，直到我迷迷糊糊地找到一個解決方案為止，但是我希望能更多地了解到我聽到的每個人都在談論的協作內容。

在此先感謝提供幫助的所有人。 我要去看看我在熱切等待反饋的同時是否可以幫助其他任何人！

編輯

感謝@theftprevention，側邊欄等的行為正常，但是我仍然遇到手機內容中斷的問題。 我要看看周圍的人是否也有同樣的問題。

Answer 1

當我在瀏覽器中調整窗口大小時，該站點的響應能力很好，但是您對移動站點看起來很奇怪是正確的，我想我知道為什么。

如果您有權訪問頁面的原始HTML，請考慮以下幾行（主頁源代碼中的第7和8行）：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

將這兩行替換為以下內容：

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

這應該可以解決移動和平板電腦瀏覽器處理內容擴展的方式。 我無法在手機的第三個屏幕截圖中重現截斷問題，但是這些meta標簽也可以很好地解決該問題。

最后，您沒有一個 ，但是有兩個非常大的未壓縮圖像。 它們分別是1.6 MB和3.4 MB。 您可能會考慮使用GIMP或其他東西來縮小它們，並在重新保存它們時使用適當的JPEG壓縮。

希望這可以幫助！