修改

Question

我在自托管的WordPress网站中使用了Quintus主题的修改版本。该网站在我测试的所有浏览器，Windows平板电脑和Windows手机上显示并运行良好。当我在运行最新iOS版本的iPad上查看该网站时，该网站被压缩到我认为的宽度在700-800px之间......除了我的自定义标题和滑块之外。博客标题，菜单和#page中包含的所有内容均未显示全宽。我把头撞到墙上，试图在大海捞针中找到这根针，以找出可能导致它显示宽度不足的原因。我甚至尝试了一些iPad模拟器，但是所有这些都完美地显示了网站。实际的iPad不是。我不确定如何检查iPad上的元素，因为iPad浏览器上没有任何选项可以这样做。有人可以帮助我吗？

博客...... http://blog.modafabrics.com

Answer 1

使用Chrome模拟器，我无法看到正在使用的任何响应式CSS。

中间的大滑块区域设置为1000px的宽度，而iPad的分辨率仅为1024 x 768px。在纵向时，您将丢失几乎四分之一的屏幕尺寸。

最好的方法是在达到1024px后开始使用百分比并开始使其响应，以便它适用于所有设备，包括手机。

在MDN上阅读有关回复CSS中使用的媒体查询的信息。

链接：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

修改

我看看能不能让你开始做得更好。

这些是您的css中所需的所有更改，需要在平板电脑的媒体查询中应用

#page {
    overflow-x: hidden; // stops the page being slid to right
}

#primary {
   float: none; // removes the float style from the element (things can go above/under it otherwise)
}

#content {
    margin: 0; // makes it full width
}

然后，您需要决定使用侧边栏做什么，例如：隐藏它或将其隐藏在内容之下。

那应该让你开始吧。继续的最好方法是使用chrome检查元素工具，然后您可以深入了解模板的每一层，并了解为什么不同的东西不会重新调整大小。

Wordpress网站无法在iPad上正常显示

1 个答案:

修改