0

好的，所以我已经建立了我的网站，它在移动设备、平板电脑横向、桌面等方面看起来很棒，但是在 iPad 上，在纵向模式下，它正在拉伸内容以填满屏幕。使用skeleton.css 将内容全部设置为420px 宽。我有这样的视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, , user-scalable=no" />

但是，在纵向模式下，内容都以全宽显示，768 像素而不是我设置的 420 像素...

有人有想法么？

提前感谢您的意见！

更新： 我通过减少媒体查询宽度来解决它，以便现在纵向平板电脑接收与横向平板电脑相同的视图。这不是我想要的，但它工作正常。

在我看来，如果 iPad 比设备小，它会拉伸内容的宽度，但如果内容更大，它只会以您在 css 中指定的尺寸显示它......如果有人对此有更多了解，请发布，因为我有兴趣了解其他项目。

谢谢。

4

1 回答 1

0

您可以使用媒体查询覆盖 iPad 上正在更改的 CSS。这将允许您专门针对 iPad，并让您更好地控制页面在该设备上的显示方式（这也可能导致其他地方的 CSS 出现问题）。

您可以在 CSS 中执行此操作：

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
  /* CSS overrides for iPad go here */
}

或者在您的 HTML 中（覆盖在单独的 CSS 文件中）：

<link rel="stylesh`eet" media="only screen and (max-device-width: 1024px)" href="../iPadStyles.css" type="text/css" />

这里还有针对视网膜显示器的媒体查询。如果您不熟悉媒体查询，我建议您查看Mozilla Developer Network上的文档。

于 2013-09-09T19:29:46.607 回答