如何在移动设备上预览 WordPress 网站

技术教程 2021年11月6日

1194 0 2

无论您是为客户设计网站还是管理自己的 WordPress 网站，在公开任何更改之前，了解它在移动设备上的外观和工作方式都非常重要.

您可能有一部可以用来查看网站的手机.但是，如果您在笔记本电脑或台式机上工作，则不得不继续使用手机很不方便.

即使您的网站在您的手机上看起来不错，也有很多手机和平板电脑.仅仅因为它看起来不错，并不一定意味着它可以在各种不同的屏幕尺寸、浏览器和操作系统上完美运行.

那么您究竟如何在移动设备上预览 WordPress 网站?在本指南中，我们将介绍一些无需离开计算机即可测试移动网站的简单方法.

为什么测试您网站的移动版本如此重要?

几年前，移动设备取代台式电脑成为浏览网页的主要方式.移动设备占 2021 年第一季度全球网络流量的 54.8%，手机和平板电脑占据了57.37% 的全球市场份额年.

在全球某些地区，移动设备的使用远远超过桌面设备的使用.例如，在印度，移动设备拥有超过 77% 的市场份额.

为了应对不断增长的移动互联网使用，Google 已开始惩罚那些在移动设备上无法提供良好用户体验的网站.

在过去几年中，我们对算法进行了多次更新，旨在为移动用户提供更好的搜索体验.2015 年"Mobilegeddon" 更新最为激烈，因为 Google 转向了移动优先模式.

作为 WordPress 用户，选择移动响应主题是确保您的网站在移动设备上看起来不错并且运行良好的第一步.

但是使用块编辑器，用户可以比以前更多地控制单个页面的格式.因此，每次添加新内容时，务必检查您的网站在移动设备上的显示效果，即使您没有开发主题背景或插件.

如果您使用像 Divi 或 Elementor 这样的可视化拖放页面构建器来创建新的页面布局或向您的网站添加内容，这一点尤其重要.

方法 1:使用内置的 WordPress 移动预览
方法 2:在 Chrome 中使用开发者视图
方法 3:使用第三方设备模拟器或测试服务

方法 1:使用内置 WordPress 移动预览

在发布 WordPress 帖子和页面之前，您总是能够预览它们.但是您是否注意到您还可以预览您的网站在移动设备上的外观?

您可以从两个地方访问 WordPress 中的移动预览:

来自帖子和页面编辑器(并非总是准确)
来自 WordPress 定制器

WordPress 帖子/页面编辑器预览

让我们首先看看帖子和页面编辑器中的移动预览是如何工作的.点击"发布"或"更新"按钮旁边的"预览"按钮.

在弹出的下拉菜单中，选择"平板电脑"或"手机"，然后点击.

这将立即调整页面编辑器的大小.但是，这是对内容外观的非常粗略和现成的估计，可能不是很准确，尤其是在您使用自定义块或外部加载的 CSS 时.

您可以在此示例中看到，编辑器只是调整了块的大小以适应较小的屏幕并包装了文本.

但是，如果您以较小的屏幕尺寸查看实时站点，您会发现它根本不是这样.相反，响应式设计设置已开始重新排列块并调整文本大小.

以下是它在较小的浏览器屏幕上的实际外观:

教训:不要相信帖子和页面编辑器中的移动预览. 公平地说，这是一个相当新的功能，自 2020 年中期发布的 WordPress 5.5 以来才出现.希望以后可以改进移动页面预览.

WordPress 定制器预览

那么 WordPress 定制器中的预览是否更好?我们来看看.

要访问 WordPress 移动预览版，请转到 外观 >在您的 WordPress 仪表板中自定义.

这将显示您网站外观的预览，并允许您实时查看对样式所做的更改如何更改其外观.您可以导航到您网站上的任何页面并上下滚动，就像它是网站的实时版本一样.

要查看您的网站在不同屏幕尺寸上的显示效果，请使用自定义菜单底部的图标在设备视图之间切换.

默认是台式机，中间是平板电脑，右边是智能手机.

这是查看您网站的移动版本的最简单快捷的方式，因为它位于 WordPress 仪表板中，只需点击几下即可访问

然而，这基本上只是为您提供与调整浏览器窗口大小相同的视图.它无法准确复制您的网站在每台移动设备上的显示和行为方式.

它还只允许您以三种不同的屏幕宽度查看您的网站.移动设备具有许多不同的屏幕尺寸和分辨率.

作为原始提案 WordPress 核心开发团队对该功能的声明说，"默认情况下只有三个选项可用，并且它们故意模棱两可.其目的不是看起来像特定设备，而是了解网站在大致平板电脑大小的纵向设备或大致手机大小的设备上的外观."

此外，WordPress 定制器仅适用于支持它的主题.这意味着如果您使用的主题不适用于定制器，您将无法使用此方法在移动设备上预览您的网站.

在 WordPress 页面构建器中查看移动预览

如果您使用的是可视化页面构建器，如 Divi、Elementor、Visual Composer 等，它们中的大多数都带有自己的工具，用于预览您网站的移动版本并查看响应式设计在不同屏幕尺寸下的外观.

请参阅您使用的构建器的用户指南，以准确了解如何为移动设备编辑和预览 WordPress 网站.

方法 2:在 Chrome 中使用开发者视图

某些浏览器具有内置的设备模拟器.Chrome 是最受欢迎的浏览器之一，您可以使用它来预览您的网站在多种不同设备和不同分辨率下的显示效果.

Chrome 设备视图比 WordPress 移动预览要先进得多.除了能够在流行设备之间切换之外，您还可以查看缩放或旋转屏幕时网站的外观，甚至可以模拟受限制的移动互联网连接.

然而，虽然与使用内置的 WordPress 移动预览相比，这为您提供了更多的预览选项，但它仍然只是您网站外观的近似.

重要的是，您只能了解您的网站在 Chrome 中的外观.许多移动设备使用不同的浏览器，仅在 Chrome 中进行测试可能还不够.

但这是一种非常快速和简单的方法，可以测试您的网站在不同尺寸下的外观和工作方式，并且可以提醒您注意任何重大问题.

要在"设备模式"下使用 Chrome，请转到查看 >开发人员菜单中的开发者工具.

这会将您的浏览器屏幕一分为二，一侧是您的网站，另一侧是代码和元素检查器.

点击看起来像手机和平板电脑的开发者工具顶部的小图标.这将调整浏览器视图的屏幕大小，以便您可以查看网站在较低分辨率下的外观.

它还会在浏览器视图的顶部添加一个额外的工具栏.您可以使用它来更改它正在模拟的设备、手动设置屏幕分辨率、调整缩放、更改设备的旋转以及设置限制级别以查看页面加载时间受到的影响.

方法 3:使用第三方设备模拟器或测试服务

对于 WordPress 开发人员来说，彻底测试他们开发的网站、主题和插件非常重要.对于此类测试，必须使用设备模拟器或模拟器.

模拟器可以复制设备的硬件和软件，而模拟器只是模拟操作系统和用户界面.

设置和运行模拟器可能很复杂，而且运行速度往往很慢. 幸运的是，它们主要用于测试应用和游戏，而不是网站测试所必需的.

以前，您必须在计算机上安装模拟器软件才能运行测试.现在要容易得多，因为有几项服务可以在云端在线运行.

这意味着您几乎可以在运行任何浏览器的任何设备上测试您的 WordPress 网站.

您可以尝试的一些服务包括:

MobileMoxie – 启用您可以在 50 多部手机上测试您的网站和移动搜索结果.您可以在有限的基础上免费使用该服务，也可以每月注册 29 美元以进行无限制的实时测试.
LambdaTest – 一个基于云的测试平台，可在数千个浏览器和多个设备的操作系统上进行站点预览，并提供实时工具调试.免费计划包括每月 60 分钟的测试，付费计划每月 15 美元起.
BrowserStack – 这实际上不是模拟器，而是一项服务，可让您在云基础架构上的 2,000 多个浏览器和真实设备上测试您的网站.该服务每月收费 39 美元，但可以免费试用.