网站内容被切断和布局问题

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压缩。

希望这可以帮助！