如何应对响应式设计和 iPad/iPhone答案

【问题标题】：How to deal with responsive design and iPad/iPhone如何应对响应式设计和 iPad/iPhone
【发布时间】：2013-04-14 08:13:59
【问题描述】：

我正在为响应式设计而苦恼。

一切都以百分比为单位，并且开始在“常规”屏幕上按预期工作。

通过 javascript 我确定设置背景图像的窗口宽度和高度。背景图片使用 css3 的“cover”属性。

但在 iPad/iPhone 上，显然一切都搞砸了。当页面内容溢出页面高度（大多数页面都这样做并且应该这样做）时，“封面”属性显然会扩展并显示图像太大。并且 height 和 margin-top 突然设置得太高了。

我的猜测是 iPhone/iPad 正在考虑将包括溢出内容在内的整个内容作为整个页面高度，而不仅仅是实际可见的屏幕......但我不知道如何处理它。

另外，当我提醒窗口宽度时，我得到：iPad、iPhone4 和 iPhone3 上的 980。我猜这表明我不能在 iPhone/iPad 上使用窗口宽度......？

如何处理移动设置？

我希望我不需要创建 iPhone/iPad 特定的设置...但我开始担心我需要这样做？

这里是带有设计的游乐场：http://basix.popweb.dk

有什么帮助或建议吗？

谢谢约翰

【问题讨论】：

你看过CSS和media queries吗？
你看过twitter.github.com/bootstrap吗？
是的，我知道媒体查询。但我正试图以最简单的方式弄清楚如何处理这个问题。学习。
我检查了引导程序。这看起来很酷而且很有前途，但对于我现在来说可能有点“完成”了。我想了解它是如何工作的，所以现在，我将尝试边做边学。这就是我想要一些建议和帮助的原因。不过谢谢！ Bootstrap 看起来很酷。

标签： ios responsive-design

【解决方案1】：

嗯，我刚刚在 iPhone 上检查了您的网站，它似乎可以加载，但是布局似乎没有响应我。

不管怎样，你在使用任何 CMS 吗？

另外，作为我的学习资料，我建议你查看http://themble.com/bones/ 即使它是一个 wordpress 主题，样式表也很好地解释了什么是有效的。尽管如此，它还是使用了我建议学习的 SASS 或 LessCSS（CSS 预处理器），因为它会在编写 CSS 时为您节省大量时间。一点都不难，2小时左右就学会了LessCsshttp://lesscss.org/。

【讨论】：