移动设备上的页面布局中断问题（或调整窗口大小时）答案

【问题标题】：Problems with page layout breaking on mobile devices (or when window resized)移动设备上的页面布局中断问题（或调整窗口大小时）
【发布时间】：2012-06-20 00:50:24
【问题描述】：

在移动设备（至少包括 iPhone 4S 和 Galaxy Nexus）上查看网页（位于 http://launchpadtoys.com/monkeygram/）时出现问题。该页面在主要桌面浏览器中正确呈现，因此我不确定解决方案可能是什么。这是我遇到的问题：http://i.imgur.com/uggr0.png

【问题讨论】：

您的背景在桌面上也表现得很奇怪，您是否使用 jQuery 来调整大小？我只是快速浏览了一下，但是在调整大小时，您的包装器变得比主体小。
是的，我也注意到包装纸的奇怪收缩。我只在此页面上使用 jQuery 在页面顶部的 iPhone 内进行幻灯片放映。
它还在破裂吗？我看到你修复了背景，所以看起来已经完成了
它还在崩溃，我实际上不得不用以前的 old_index 替换实时版本（该版本实际上与我的眼睛相同，但没有同样的问题）。如果您能想到可能导致问题的其他任何内容，则损坏的版本仍然在线launchpadtoys.com/monkeygram/new-monkeygram-promo-page.php。过去两天我在 firebug 中调试了几个小时，但我找不到任何会导致包装器以这种方式运行的东西
页面对我来说是 404。我认为那只是为了我？

标签： html css layout mobile

【解决方案1】：

尝试在页面的头部添加<meta name="viewport" content="width=device-width" />。

【讨论】：

我实际上已经尝试过这两种方法并将宽度设置为显式值。将其设置为 1300 像素宽似乎是一个临时修复，但并不理想。我在launchpadtoys.com/monkeygram/old_index.php 有一个旧版本的页面仍然在线，如果有帮助的话就不存在这个问题。
在快速查看您的 CSS 后，我认为 #lbCaption, #lbNumber{margin-right: 71px;} 可能会在较小的浏览器上破坏您的页面。
虽然 lbCaption 和 lbNumber 在代码中每个都被引用一次，但它们各自的 DIV 也都具有 display:none，因此不应该对布局的显示方式产生任何影响。我还删除了这些样式以防万一，没有任何改变。