移动 Safari 上的 Wordpress 主题损坏答案

【问题标题】：Wordpress theme mangled on Mobile Safari移动 Safari 上的 Wordpress 主题损坏
【发布时间】：2012-04-11 16:06:30
【问题描述】：

我正在尝试翻译网站主题，使其在移动设备上看起来相似。我现在唯一需要测试的设备是 iOS 设备：iPhone 和 Gen 3 iPod Touch。 iPhone 的分辨率更高（视网膜）。

当我访问我正在处理的网站 (http://diynamic.net/dev/jetcityairtours) 时，主题呈现的页面宽度仅为 iDevice 总屏幕宽度的一半，但有些元素会以它们在 PC 上的 Chrome 浏览器上的方式浮动.如果我可以让背景 div 和菜单在页面上呈现全宽，整个网站会很棒 - 这将是完美的！

我有 wordpress 手机

我的问题是：为什么主题越来越混乱？ iOS Safari 是否有“查看源代码”选项？是否有另一种用于为 iOS 开发主题的故障排除解决方案，特别是移动设备？和：其他人是否在非 iOS 设备上看到了同样的效果（可能不是问最后一个问题的正确位置）。

我通过 Wordpress 移动包安装了一个非常丑陋的移动主题 - 只是默认设置。如果您有兴趣在移动设备上进行测试，请转到非移动主题，链接在底部。

我知道 Chrome 和 Firefox 中的屏幕模拟器插件，但我不知道桌面平台上的用户代理欺骗/模拟。

我不确定我是否应该为每个“问题”只发布一个问题，所以如果没有适当地隔离，我们深表歉意。

【问题讨论】：

标签： wordpress mobile mobile-safari

【解决方案1】：

您需要的是使用视口元标记（参见下文）。更具体地说，就您而言，听起来您可以通过在 head 部分中包含以下内容来解决您的问题：

<head>
...
<meta name = "viewport" content = "maximum-scale = 1.0">
...
</head>

视口元标记虽然由 Apple 创建，但也适用于 Android 浏览器。以供参考：一般说明、信息和示例here

【讨论】：

所以我去添加它，我发现了这个：<meta name="viewport" content="width=device-width" /> 虽然现在有一些元素可以更好地缩放，但单列效果仍然存在，不到屏幕宽度的一半。
你的意思是你的内容只占了屏幕的一半，其余的都是空白的，对吧？这是因为您还需要设置比例，使用“比例”参数，就像上面的代码示例一样。
只有内容容器div拉伸失败，所以背景被截断。但是，表单、图像和菜单都脱离了容器并溢出到整个页面。
这可能取决于我上面所说的“比例”设置，但我不确定，也许你可以发布一个指向该页面的链接，以便我可以看到代码。
好的，删除两个视口元标记并仅尝试这一行：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 希望对您有所帮助！