Wordpress站点未在iPad上正确显示

我在一个自我托管的WordPress网站上使用了Quintus主题的修改版本。该网站在我测试过的所有浏览器、windows平板电脑和windows phone上都能正常运行。当我在运行最新iOS版本的iPad上查看该网站时，该网站被挤压到了我假设的700-800px宽。。。除了我的自定义标题和滑块之外的所有。博客标题、菜单以及#页面中包含的所有内容都没有显示全宽。我把头撞在墙上，试图在干草堆中找到这根针，以找出是什么导致它显示的宽度不足。我甚至尝试了一些iPad模拟器，但是所有这些都完美地展示了这个网站。实际的iPad并非如此。我不知道如何检查iPad上的元件，因为iPad broswer上没有这样做的选项。有人能帮我吗

---

博客

使用chrome emulator，我看不到任何响应性的

CSS

被使用

你的中间大滑块区域宽度为1000 px，而iPad的分辨率只有1024×768 px。在“纵向”中，您将丢失几乎四分之一的屏幕大小

最好的解决方法是，一旦达到1024px，就开始使用百分比，并开始使其具有响应性，以便在包括手机在内的所有设备上都能正常工作

阅读MDN中有关媒体查询的内容，这些查询在响应

CSS

中使用

链接：

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

这些都是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 inspect element工具，然后深入到模板的每一层，看看为什么不同的东西没有重新调整大小

你能在Safari中重现这个问题吗？不。。。Safari for Windows操作系统表现出色。到目前为止，我只在iPad上的Safari和Mercury浏览器上遇到问题。问题解决了。。。看起来是一个边缘和填充问题。我没有在代码中的某些元素上指定边距，显然iPad不喜欢这样。在主容器中添加了0的边距，现在一切都很好。这很有趣。。。因为我在主题CSS中确实有一个响应结构。页面最大宽度设置为1100像素，而滑块最大宽度设置为1000像素。滑块没有内置任何响应代码，它是iPad上唯一适合横向和纵向视图的东西。它可以很好地缩小以适应屏幕大小的宽度。不幸的是，页面上的其余元素并不遵循套件，它们具有内置的响应能力。我甚至尝试删除响应代码，但这在iPad上似乎并不重要。我还使用Chrome Emulator对该网站进行了测试，正如我在最初的帖子中提到的，模拟器似乎都能很好地与iPad配合使用，但是当你实际使用iPad并访问该网站时，页面主体被缩短，就好像它位于更小的手机屏幕上一样，比如手机。