您想预览wordPress/ target=_blank class=infotextkey>WordPress网站的移动版本吗？预览移动布局可帮助您了解网站在移动设备上的外观。当您的网站正在开发中甚至上线时，在台式计算机上查看移动版本通常更容易。然后，您可以快速进行更改并查看其效果。在本文中，我们将向您展示如何从桌面查看WordPress网站的移动版本。

为什么要预览移动布局

超过50%的网站访问者将使用手机访问您的网站。大约3%的人将使用平板电脑。

这意味着拥有一个在移动设备上看起来很棒的网站非常重要。

事实上，移动是如此重要，以至于谷歌现在使用移动优先指数作为其网站排名算法。这意味着 google 将使用您网站的移动版本进行索引编制。

即使您使用的是响应式 WordPress 主题，您仍然需要检查您的网站在移动设备上的外观。您可能希望创建针对移动用户需求进行优化的关键登录页面的不同版本。

重要的是要记住，大多数移动预览不会完全完美，因为有许多不同的移动屏幕尺寸和浏览器。您的最终测试应始终是在实际的移动设备上查看您的网站。

方法1：使用WordPress的主题定制器

您可以使用WordPress主题定制器来预览WordPress网站的移动版本。

只需登录到您的WordPress仪表板，然后转到外观»自定义屏幕。

这将打开WordPress主题定制器。在本教程中，我们将使用 Astra 主题。

根据您使用的主题，您可能会在左侧菜单中看到略有不同的选项。

在屏幕底部，只需单击移动图标即可。

然后，您将看到您的网站在移动设备上的外观预览。

当您尚未完成博客创建或处于维护模式时，这种预览移动版本的方法特别有用。

现在，您可以对网站进行更改，并在上线之前检查它们的外观。

方法2：使用谷歌浏览器的DevTools设备模式

谷歌浏览器有一套开发者工具，让你在任何网站上运行各种检查，包括查看它在移动设备上的外观预览。

只需在桌面上打开谷歌浏览器，然后访问您要检查的页面。这可能是您网站上页面的预览，甚至可能是您竞争对手的网站。

接下来，您需要右键单击页面并选择“检查' 选项。

将在屏幕右侧或底部打开一个新面板。

它将看起来像这样：

在开发人员视图中，您将能够看到您网站的 html 源代码、css 和其他详细信息。

接下来，您需要单击“切换设备工具栏”按钮以更改为移动视图。

您将看到网站的预览缩小到移动屏幕尺寸。

您网站的总体外观也会在移动视图中发生变化。例如，菜单将折叠，其他图标将向左而不是菜单右侧移动。

当您将鼠标光标悬停在网站的移动视图上时，它将变成一个圆圈。可以用鼠标移动此圆圈以模仿移动设备上的触摸屏。

您也可以按住“Shift”键，然后单击并移动鼠标以模拟捏合手机屏幕以放大或缩小。

在您网站的移动视图上方，您将看到一些其他选项。

这些设置允许您执行一些额外的操作。您可以查看您的网站在不同类型的智能手机上的外观。

例如，您可以选择iphone等移动设备，并查看您的网站在设备上的显示方式。

您还可以模拟站点在快速或慢速 3G 连接下的性能。您甚至可以使用旋转图标旋转手机屏幕。

如何在WordPress中创建特定于移动设备的内容

您的网站必须具有响应式设计，以便移动访问者可以轻松浏览您的网站，这一点很重要。

但是，仅仅拥有一个响应式网站可能还远远不够。移动设备上的用户通常寻找与桌面用户不同的东西。

许多高级主题和插件可让您创建在桌面和移动设备上显示不同的元素。您还可以使用页面构建器插件（如 SeedProd）在移动视图中编辑登录页面。

您应该考虑为潜在客户生成表单创建特定于移动设备的内容。在移动设备上，这些表单应要求提供最少的信息，最好只是一个电子邮件地址。它们也应该看起来不错并且易于关闭。

创建特定于移动设备的弹出窗口和潜在客户生成表单的另一种好方法是使用 OptinMonster。它是市场上最强大的WordPress弹出插件和潜在客户生成工具。

OptinMonster 具有特定的设备定位显示规则，可让您向移动用户和桌面用户展示不同的广告系列。您甚至可以将其与 OptinMonster 的地理定位功能和其他高级个性化功能结合使用，以获得最佳转化。