0

好的，在我开始之前，我首先要说我不是一个经验丰富的 Web 开发人员！

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

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

在纵向的 iPad 上，当您打开“主页”页面时，它会放大一点，但您无法缩小以获取屏幕上的整个页面宽度。“MOT”页面被完全缩小，因此整个宽度都适合。

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

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

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

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

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

谢谢，

保罗

4

2 回答 2

4

简单的修复：

<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">
于 2012-10-16T21:13:45.720 回答
0

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

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

谢谢 cal_b

于 2012-10-17T14:09:44.883 回答