如何从桌面查看WordPress网站的移动版本

您要预览WordPress网站的移动版本吗？预览移动设备布局可帮助您查看网站在移动设备上的外观。

尽管您当然可以在手机上查看实时站点，但这在开发阶段没有帮助。

即使您的网站是在线的，通常也更容易在台式计算机上查看移动版本，因此您可以快速进行更改并查看其效果。

在本文中，我们将向您展示两种简单的方法，可以轻松预览WordPress网站的移动布局，而无需切换到其他设备。

为什么要预览手机版式

您网站的访问者中有50％以上将使用手机访问您的网站。大约3％的人将使用平板电脑。

这意味着拥有一个在移动设备上看起来不错的网站是必不可少的。

实际上，移动设备是如此重要，以至于Google现在为其网站排名算法使用“移动设备优先”索引。

即使您使用的是响应式WordPress主题，您仍然需要检查您的网站在移动设备上的外观。您甚至可能想要创建不同版本的关键登录页面，这些版本针对移动用户的需求进行了优化（稍后会详细介绍）。

在本文中，我们将介绍两种不同的方法来测试您的网站使用桌面浏览器在移动设备上的外观。

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

1.使用WordPress的主题定制器

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

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

这将打开WordPress主题定制器。根据您使用的主题，您可能会在此处的左侧菜单中看到稍微不同的选项：

在屏幕底部，单击移动图标。然后，您将预览网站在移动设备上的外观。

注意：蓝色编辑符号仅出现在预览器中。您不会在实时网站上看到这些内容。

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

您可以进行更改并检查它们的外观，然后再将其投入使用。

2.使用Google Chrome的DevTools设备模式

Google Chrome浏览器具有一组开发人员工具，可让您在任何网站上进行各种检查，包括预览网站在移动设备上的外观。

只需在桌面上打开Goog​​le Chrome浏览器，然后访问要检查的页面即可。

这可能是您网站上页面的预览，甚至可能是竞争对手的网站。

接下来，您需要右键单击该页面，然后选择“检查”。

右侧将打开一个新窗格，如下所示：

在开发人员视图中，您将能够看到站点的HTML源代码。

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

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

您还将注意到您网站的外观更改为移动视图。在上面的示例中，菜单已折叠，并且“搜索”图标已移至菜单的左侧而不是右侧。

当您将鼠标光标放在网站的移动视图上时，它将变成一个圆圈，如下所示：

可以使用鼠标移动该圆圈，以模仿移动设备上的触摸屏。

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

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

这些使您可以做一些额外的事情。您可以检查您的网站在不同类型的智能手机上的外观。您还可以在快速或慢速3G连接上模拟站点的性能。您甚至可以使用旋转图标旋转移动屏幕。

如何在WordPress中创建移动专用内容

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

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

许多高级主题和插件可让您创建在桌面设备和移动设备上显示不同的元素。您还可以使用Beaver Builder之类的页面构建器插件在移动视图中编辑目标页面。

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

OptinMonster是创建移动设备专用弹出窗口和销售线索生成表格的绝佳方法。它是市场上功能最强大的WordPress弹出插件和销售线索生成工具。

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

我们希望本文能帮助您学习如何预览网站的移动布局。您可能还需要阅读有关最佳插件的文章，以将WordPress网站建设转换为移动应用程序。