我的响应式网站不工作。修复：视口

我的一个朋友最近联系我寻求帮助，他使用X 主题构建了一个WordPress 网站。那天早上，他的客户在注意到他的网站无法在他的 iPhone 上正确显示后给他打电话。 Nick自己查了一下，果然，他设计的漂亮的响应式设计已经不行了。

令他更加困惑的是，当他在桌面上调整浏览器窗口的大小时，该网站是响应式的，但在他的 iPhone 上，只显示桌面版本。为什么一个网站在台式电脑上有响应而在移动设备上没有响应？

为什么响应式设计不起作用

当 HTML 文件的标题中缺少一行代码时，响应式设计将停止工作。如果缺少这一行代码，您的 iPhone、Android 和其他移动设备将假定您正在查看的网站是全尺寸桌面网站，并调整viewport 的大小覆盖整个屏幕。

视口和视口大小是什么意思？

在所有设备上，视口的大小是指用户当前可见的网页区域的大小。假设您拿着宽度为 320 像素的 iPhone 5。除非另有明确说明，否则 iPhone 会假定您访问的每个网站都是宽度为 980px 的桌面网站。

现在，使用您想象中的iPhone 5，您访问一个专为800px 宽的桌面设计的网站。它没有响应式布局，因此您的 iPhone 显示全角桌面版本。

不，这不对。对于视口大小，可以涉及缩放。 iPhone 必须缩小才能看到网页的全角版本。请记住，视口是指用户当前可见的页面区域。 iPhone 用户目前看到的是 320 像素的页面，还是他们看到的是全角版本？

没错：他们在显示屏上看到的是全宽网页，因为 iPhone 假定这是默认行为：它已缩小，因此用户可以查看最大宽度为 980 像素的网页。所以iPhone的viewport是980px

当您放大或缩小时，视口大小会发生变化。我们之前说过，我们假想的网站有 800 像素的宽度，所以如果你放大你的 iPhone，使网站的边缘接触到你的 iPhone 显示屏的边缘，视口将为 800 像素。 iPhone 在桌面站点上可以有 320px 的视口，但如果有，你只能看到它的一小部分。

我的响应式网站坏了。我如何解决它？

答案是一行HTML，当插入网页的标题时，它告诉设备将视口设置为它自己的宽度（在iPhone 5的情况下为320px）并且不缩放（或缩放）页面。

有关与此元标记相关的所有选项的更多技术讨论，请查看tutsplus.com 上的这篇文章。

当它没有响应时如何修复WordPress X主题

回到我之前的朋友：这行代码在他更新X主题时消失了。修复你的时，请记住 X 主题不只使用一个头文件——它为每个堆栈使用不同的头文件，所以你必须编辑你的。

由于Nick使用了X主题的Ethos堆栈，他不得不将我之前提到的代码行添加到位于x /frameworks/views/ethos/wp-header的头文件中。PHP 。如果您使用不同的堆栈，请将您的堆栈名称（Integrity、Renew 等）替换为“ethos”以找到正确的头文件。插入那一行，瞧！你很高兴。