0

首先，我要说我已经在所有 StackExchange 网站上潜伏了很长一段时间，现在我遇到了我遇到的第一个问题。

我正在一个现场网站上工作——Beautiful & Abundant——一切都在我的台式机和平板电脑上正常工作，但是当我在我的手机（三星 Galaxy S3）上打开它时，它会变得很糟糕。

屏幕截图显示在我的手机上查看的着陆。很好（尽管有一些糟糕的故障排除布局）。第二张图片显示侧边栏向外延伸，这是呕吐的第一个区域。侧边栏是 235 像素宽，我的手机的显示分辨率是 360 像素宽。做一些简单的数学运算，侧边栏应该占据我屏幕的 65.27%（当然是重复的）。不幸的是（如图所示）它只占屏幕的三分之一左右，更不用说文本比我设置的要小得多。

第二个关注领域（也是最重要的）是移动设备上被截断的内容。如第三个屏幕截图所示，这一切都突然结束了。我不明白。我以前从来没有遇到过这个问题。

该网站是建立在 WordPress 上的，但我不认为这是一个专门的 WP 问题，这就是为什么我在这里而不是在 WordPress 答案上发帖的原因。如果我应该在那里发帖，请告诉我，我会非常乐意移动它。

我通常只是一遍又一遍地工作，直到我神奇地偶然发现一个决议，但我希望能更多地了解我听到每个人都在谈论的这种合作。

在此先感谢大家/任何提供帮助的人。在急切等待反馈的同时，我会去看看是否可以帮助其他人！

编辑

感谢@theftprevention，侧边栏等行为正常，但我仍然遇到手机内容被截断的问题。我要看看我周围的其他人是否有同样的问题。

4

1 回答 1

0

当我在浏览器中调整窗口大小时，该网站的响应能力正常，但您说的移动网站看起来很奇怪是对的，我想我知道为什么。

如果您有权访问页面的原始 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" />

这应该解决移动和平板电脑浏览器处理内容缩放的方式。我无法在我的手机上重现您第三张截图中的截断问题，但这些元标记也可以很好地解决这个问题。

最后，您拥有的不是一张，而是两张非常大的未压缩图像；它们分别为 1.6 MB 和 3.4 MB。您可能会考虑使用 GIMP 或其他东西来缩小它们并在重新保存它们时使用适当的 JPEG 压缩。

希望这可以帮助！

于 2013-09-23T16:53:30.123 回答