Question

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

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

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

有人有什么想法吗？

提前感谢您的意见！

更新我通过减少媒体查询宽度来解决这个问题，以便现在肖像平板电脑获得与横向平板电脑相同的视图。这不是我想要的，但它运作正常。

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

感谢。

Answer 1

您可以使用媒体查询覆盖在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" />

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