iPad 2 网站大小问题答案

【问题标题】：iPad 2 website sizing issueiPad 2 网站大小问题
【发布时间】：2012-10-17 22:09:44
【问题描述】：

好吧，在我开始之前，我先说我不是一个经验丰富的网络开发人员！

我正在写这个网站：http://leydencarcentre.co.uk

在桌面浏览器上看起来很合理，但我很难让 iPad (2) 正确显示它。

在纵向的 iPad 上，“主页”页面在您打开时会稍微放大，但您无法缩小以在屏幕上显示整个页面宽度。 “MOT”页面被完全缩小，以适应整个宽度。

在 iPad 上横屏时，它们看起来都是正确的。

我的网站基本上是 960 像素的固定宽度，但请注意，我已尝试使用媒体查询使其具有响应性。（这不是一个流畅的布局，但不同尺寸的 div 宽度略有不同 - 台式机、平板电脑、手机）。我为每种布局类型设置了不同颜色的主背景，这样您就可以看到每种媒体类型的 CSS 何时生效。（桌面版是白色，平板电脑是古色古香的白色，而移动版是橙色）。

有人可以帮忙吗？我用谷歌搜索了“iPad 网站宽度”之类的东西，但我不知道最好的方法是什么。

任何关于这个特定 iPad 问题的帮助或关于我的 CSS 和布局的建议都非常受欢迎！

我知道完全响应的流体布局是城里的热门话题，但我希望尽快完成这个网站。我真的需要一个完全流畅的布局吗？

谢谢，

保罗

【问题讨论】：

我忘了提到我已经尝试过使用视口标签...它目前设置为<meta name="viewport" content="width=device-width">
纵向缩小的原因是页面不够长，无法完全缩小以填充宽度。高度在宽度之前完全缩小。
所以我应该在主页添加一些空白填充以使其更长吗？那么在横向模式下我会在页面上有多余的空白，不是吗？
这是一个好的解决方案吗？按照下面的建议修复视口值得一试吗？我需要指导，我不是网络老兄:-)

标签： css ipad web responsive-design media-queries

【解决方案1】：

简单的解决方法：

<meta name="viewport" content="width=1000">

这将缩放 iPad 视口以完全适合您的页面（chrome 告诉我 body 是 1000px 宽）。

就移动网络的良好做法而言，我还添加了一些缩放选项，以便用户可以放大/缩小页面的不同部分。例如：

<meta name="viewport" content="width=1000, minimum-scale=.5, initial-scale=1, maximum-scale=2.5">

【讨论】：

啊，桌面 CSS 是 1000 宽，但是请注意，当您将浏览器调整为更窄时，它会将宽度切换为 960（我这样做是为了首先满足 iPad 的需求...我在某处读到 960 宽对于 iPad 来说是一个很好的宽度）。所以我需要将视口修复为 960？就跨设备的互操作而言，这是一件好事吗？
简单的解决方法是将站点设置为 960 像素，并将视口宽度设置为 960。只要您让用户在移动/平板电脑上扩展网站，这将提供不错的用户体验。如果你完全响应，你将不得不重新审视你的布局，以确保它适用于所有不同尺寸的设备——例如，重新定位侧面内容，在每个设备上以适当的方式保持你的导航，并确保一切都以一种有意义的方式垂直堆叠。
响应式设计更难作为改造 :)
我尝试了通过一些最小/最大比例设置将视口设置为 960 的简单修复。我无法在 iPad 上试用它，因为我回家之前没有连接，但我确实在我的 Android 手机上试用过。它有一个奇怪的效果......菜单和右侧栏中的文本很小，但段落文本很大。我现在已经恢复到设备宽度设置，谜团还在继续……

【解决方案2】：

最后我选择了cale_b，因为我尝试了许多视口设置，它要么在iPad上显示OK，但在Android下的Chrome上不显示，反之亦然。

所以我在主体 div 中添加了一个最小高度。

谢谢cal_b

【讨论】：