保存到主屏幕时，iOS4 上 iPhone 上的网站宽度错误答案

【问题标题】：Website the wrong width on iPhone on iOS4 when saved to Home Screen保存到主屏幕时，iOS4 上 iPhone 上的网站宽度错误
【发布时间】：2010-07-14 21:37:01
【问题描述】：

我有a website，在 iPhone 上的 Safari 中查看时看起来不错。在 iOS3.x 中，您可以将其作为图标保存到主屏幕，它可以正常打开。

但在 iOS4 中，虽然它在 Safari 中看起来仍然是正确的宽度，但如果您直接从主屏幕图标打开它，那么它就太宽了。

我花了几个小时摆弄视口元标记的各种设置和 CSS 调整，但没有任何乐趣。任何人都可以看到有什么问题，或者为什么它在 iOS4 和 iOS3 中会有所不同？

【问题讨论】：

这是它的外观截图：gyford.com/temp/guardian1.png 使用 iOS4 从主屏幕打开时的外观之一：gyford.com/temp/guardian2.png
如果有人再次遇到这个问题，我已经在这里写下了我的最终解决方案：gyford.com/phil/writing/2010/07/06/web-page-iphone.php 基本上，使用最大宽度，而不是宽度。

标签： iphone css safari webkit width

【解决方案1】：

编辑：我测试了它，确实有问题。我在这里帮不了你，但它可能与你的 CSS 有关。

原答案：

这是因为当您在主屏幕上创建网络剪辑时，iPhone 会自动保存网站的当前缩放级别。如果您不希望发生这种情况，请确保在创建网络剪辑之前将其完全缩小。

【讨论】：

感谢您收看埃米尔。奇怪的是它在 iOS3 中似乎工作正常，并且在两种情况下看起来不同。我想知道渲染器有什么不同。
看起来该站点几乎将自身重置为该位置。如果你稍微滚动一下，它会在几秒钟内弹回顶部。您还没有定义 META 标记 REFRESH，是吗？
没有。我不确定您所说的“弹回顶部”是什么意思。我想这可能只是您第一次从主屏幕打开图标 - 最初它只有一种来自 Safari 的“预览”版本，但页面顶部没有 Safari 位置栏。当它真正加载页面时，它会将其定位在屏幕的顶部。我认为这与这个问题无关。

【解决方案2】：

我查看了您的 CSS，您正在定义一个设置 px 的宽度。尝试在您的 div（包装器、窗口、主程序等）中使用“width:100%”而不是设置 px。当然，这意味着您必须“识别”设备并发送不同的 css，如果它不是 iphone 上的 webview 的话。

现在只测试 100%，如果它有效，那么您可以开始查看根据正在查看页面的设备重定向 css。

希望这是有道理的，如果不告诉我。

【讨论】：

谢谢，但这似乎大致相同 - 该网站在 Safari 中看起来不错，但从主屏幕打开时却不行。诡异的。如果您适当地设置视口，Apple 文档建议固定宽度的网站应该没问题：developer.apple.com/safari/library/documentation/…“如果您的网页小于 980 像素，那么您应该设置视口的宽度以适合您的 Web 内容。如果您正在设计iPhone 特定的网络应用程序...将宽度设置为设备的宽度。”

【解决方案3】：

仅供参考 - 这让我发疯了。我的主屏幕链接在 vn 3 上工作得非常好，现在它坏了。

我确定这是一个错误...如果/当我找到修复方法时会做出响应。

【讨论】：