Html 移动web布局不一致问题

我已尝试配置以下页面，以便页面宽度适合设备的屏幕大小：

我用于配置的html如下所示：

不过，此页面在iPad上呈现的效果与预期一致，但在iPhone上则不同 当在iPhone中打开时，页面总是太大，因此超出了屏幕宽度，因此右侧被裁剪

我是否未正确使用视口配置

---

我还有一个类似的页面，dom中有更多电影细节对象，它在iPhone上可以正确调整大小：

您使用的是硬编码的宽度值。用百分比代替。例如，

宽度：80%

。这将允许页面元素相应地缩放

iPad可能看起来不错，因为它的视窗比你硬编码的宽度设置大（在你的例子中，780px在“桌面”上）

以下是JSFIDLE示例（在每个示例中调整浏览器的大小）：

• 此示例使用百分比作为宽度值（请注意框如何随浏览器缩放）

• 此示例使用硬编码的宽度值（就像您正在使用的）。请注意，该框如何不随浏览器缩放

---

谢谢你的回复，但我认为这不是原因。我有另一个页面，它的布局非常相似，也将顶部表格指定为780px，并且在这里正确调整了大小：其他人无法查看您的“localhost”，它只能在您的计算机上本地可用。我正在编辑我的文章，以包括两个我的意思的JSFIDLE演示。对不起，我指的是这个链接：。进行了一些调试，并注意到如果dom中有多个movie details对象，则会发生大小调整。然而，如果只有一部电影的细节，那么就没有了。你知道是什么导致了这种奇怪的行为吗？请在你的问题中加入你的HTML/CSS。