如何让网站在 iPhone 和 iPad 上显示得更好？（宽度太小）答案

【问题标题】：How to get website to show better in iPhone and iPad? (width too little)如何让网站在 iPhone 和 iPad 上显示得更好？（宽度太小）
【发布时间】：2012-03-15 04:18:15
【问题描述】：

我正在使用的网站在大多数浏览器中运行良好（所有我都测试过），但在带有 ios5 的 iPhone (4) 中它看起来不太好。

它以某种方式从网站右侧切掉了大约 80-100 像素，从而隐藏了文本和图像。

如何设置此网站以强制 iPhone（和 iPad）全部显示？

宽度为 1030 像素。通常我会看到 iPhone 会“缩放”网页以适应屏幕，但不知何故不是这样。

Here is the site

我一直在玩css看看它是否有帮助，但现在我没有找到它。

有什么想法吗？

我需要使用一些 javascript，还是应该以某种方式修改设计？

PS：我现在不打算制作“移动网站”，只是让当前网站在 iPhone 等设备上显示所有内容。

【问题讨论】：

Google 的一个术语是“viewport meta”与“iPad”的组合。例如，this article 可能会引起人们的兴趣（尽管它早在 2010 年就已经发布了）。
@Jeroen 谢谢。成功了 :-) <meta name="viewport" content="width=1030, maximum-scale=1.0" />
很好听。您应该将最终解决方案和发现作为答案发布，并接受它作为对您有用的答案。
是的，我试过了。但是在问题至少存在 12 小时之前，我不被允许发布我自己问题的答案。所以我现在回来发帖:-)

标签： iphone html css mobile

【解决方案1】：

@Jeroen 在我的情况下给出了最好的答案：

<meta name="viewport" content="width=1030, maximum-scale=1.0" />

由于 Jeroen 没有提交作为答案，我将其发布在这里作为答案:-)

我将上面的元数据放在我的网站中，它就像一个魅力！ 谢谢杰伦

【讨论】：

这是答案，但在 2 天过去之前，我不能接受这个作为我的答案...

【解决方案2】：

几个解决方案：

1) 我会尝试专门针对小型设备的媒体查询，请参阅此处：http://www.alistapart.com/articles/responsive-web-design/

2) 或者，您也可以直接针对 iOS 设备，试试这个解决方案：Loading JS script for only iOS devices?

【讨论】：

【解决方案3】：

这类问题的通常解决方案是为不同的浏览器创建不同的样式表。做一些研究以了解用户从哪里连接（IE、chrome、ipad 等）并相应地绑定 css。

【讨论】：

是的，我知道。但我一直在玩弄 CSS，却没有找到使 iPhone 呈现页面比实际更窄的原因。我一生中制作了很多网站，但从未发现这是一个问题。我制作的所有其他网站都应该在 iPhone 等设备中显示。只有 iPhone 中的 Safari 会做一些奇怪的事情......
浏览器？不，决议？是的。您应该针对设备尺寸或屏幕分辨率（例如