无论您是为客户设计网站还是管理自己的WordPress网站，在公开任何更改之前了解它在移动设备上的外观和工作方式都很重要。
您可能有一部手机可以用来查看您的网站。但是，如果您在笔记本电脑或台式机上工作，则不得不继续使用手机会很不方便。
即使您的网站在您的手机上看起来不错，也有很多手机和平板电脑。仅仅因为它看起来不错，并不一定意味着它可以在各种不同的屏幕尺寸、浏览器和操作系统上完美运行。
那么，您究竟如何在移动设备上预览WordPress网站呢？在本指南中，我们将介绍一些无需离开计算机即可在移动设备上测试您的网站的简单方法。
为什么测试网站的移动版本如此重要？
几年前，移动设备取代台式电脑成为浏览网页的主要方式。2021年第一季度，移动设备占全球网络流量的54.8%，去年手机和平板电脑占据了全球57.37%的市场份额。
在全球一些地区，移动设备的使用比桌面设备的使用要大得多。例如，在印度，移动设备拥有超过77%的市场份额。
为了应对不断增长的移动互联网使用，谷歌已经开始惩罚那些不能在移动设备上提供良好用户体验的网站。
在过去的几年中，已经有许多算法更新，旨在为移动用户提供更好的搜索体验。2015年的“ Mobilegeddon ”更新最为激烈，因为谷歌转向了移动优先模式。
作为WordPress用户，选择移动响应主题是确保您的网站看起来不错并且在移动设备上运行良好的第一步。
但是使用块编辑器，用户可以比以前更好地控制单个页面的格式。因此，即使您不是在开发主题或插件，每次添加新内容时，检查您的网站在移动设备上的外观也很重要。
如果您使用Divi或Elementor等可视化拖放页面构建器来创建新页面布局或向您的网站添加内容，这一点尤其重要。
方法一：使用内置的WordPress移动预览
您始终可以在发布之前预览您的WordPress文章和页面。但是您是否注意到您还可以预览您的网站在移动设备上的外观？
在WordPress中有两个地方可以访问移动预览：
- 来自文章和页面编辑器（并不总是准确的）
- 来自WordPress定制器
WordPress文章/页面编辑器预览
我们先来看看文章和页面编辑器中的移动预览是如何工作的。单击“发布”或“更新”按钮旁边的“预览”按钮。
在弹出的下拉菜单中，选择“平板电脑”或“手机”，然后点击。
这将立即调整页面编辑器的大小。但是，这是对内容外观的非常粗略和现成的估计，可能不太准确，尤其是在您使用自定义块或外部加载的CSS时。
您可以在此示例中看到，编辑器只是调整了区块的大小以适应较小的屏幕并包装了文本。
但是，如果您以较小的屏幕尺寸查看实时站点，您会发现它看起来根本不像这样。相反，响应式设计设置已开始重新排列块并调整文本大小。
以下是它在较小的浏览器屏幕上的实际外观：
教训：不要相信文章和页面编辑器中的移动预览。公平地说，这是一个相当新的功能，并且仅在2020年年中发布的WordPress 5.5之后才出现。希望未来移动页面预览会有所改进。
WordPress定制器预览
那么WordPress定制器中的预览是否更好？让我们来看看。
要访问WordPress移动预览版，请转到WordPress仪表盘中的外观 > 自定义。
这将显示您网站外观的预览，并允许您实时查看您对样式所做的更改如何更改其外观。您可以导航到站点上的任何页面并上下滚动，就像它是站点的实时版本一样。
要查看您的网站在不同屏幕尺寸上的显示效果，请使用自定义菜单底部的图标在设备视图之间切换。
默认是桌面，中间是平板，右边是智能手机。
这是查看您网站的移动版本的最简单、最快捷的方式，因为它位于WordPress仪表盘中，只需单击几下即可访问
但是，这基本上只是为您提供与调整浏览器窗口大小相同的视图。它并不能准确复制您的网站在每台移动设备上的显示和行为方式。
它还只允许您以三种不同的屏幕宽度查看您的网站。移动设备具有许多不同的屏幕尺寸和分辨率。
正如WordPress核心开发团队对该功能的原始提案所述，“默认情况下只有三个选项可用，而且它们是故意模棱两可的。其目的不是看起来像特定的设备，而是要了解网站在大致平板大小、纵向设备或大致手机大小的设备上可能是什么样子。”
此外，WordPress定制器仅适用于支持它的主题。这意味着如果您使用的主题不适用于定制器，您将无法使用此方法在移动设备上预览您的网站。
在WordPress页面构建器中查看移动预览
如果您使用的是Divi、Elementor、Visual Composer等视觉页面构建器，它们中的大多数都带有自己的工具，用于预览您网站的移动版本并查看响应式设计在不同屏幕尺寸下的外观。
请参阅您正在使用的构建器的用户指南，以准确了解如何在移动设备上编辑和预览您的WordPress网站。
方法二：在Chrome中使用开发者视图
一些浏览器具有内置的设备模拟器。Chrome是最受欢迎的浏览器之一，您可以使用它来预览您的网站在多种不同设备和不同分辨率下的外观。
Chrome设备视图比WordPress移动预览要先进得多。除了能够在流行设备之间切换外，您还可以查看缩放或旋转屏幕时网站的外观，甚至可以模拟受限制的移动互联网连接。
但是，虽然这为您提供了比使用内置WordPress移动预览更多的预览选项，但它仍然只是您网站外观的近似值。
重要的是，您只能了解您的网站在Chrome中的外观。许多移动设备使用不同的浏览器，仅在Chrome中进行测试可能还不够。
但这是测试您的网站在不同大小下的外观和工作方式的一种非常快速和简单的方法，它可以提醒您任何重大问题。
要在“设备模式”下使用Chrome，请转到菜单中的查看 > 开发人员 > 开发人员工具。
这会将您的浏览器屏幕分成两部分，一侧是您的网站，另一侧是代码和元素检查器。
点击开发者工具顶部看起来像手机和平板电脑的小图标。这将调整浏览器视图的屏幕大小，以便您可以看到您的网站在较低分辨率下的外观。
它还将在浏览器视图的顶部添加一个额外的工具栏。您可以使用它来更改它正在模拟的设备、手动设置屏幕分辨率、调整缩放、更改设备的旋转以及设置节流级别以查看页面加载时间受到的影响。
方法三：使用第三方设备模拟器或测试服务
对WordPress开发人员来说，彻底测试他们开发的网站、主题和插件非常重要。对于这种测试，使用设备模拟器或模拟器是必不可少的。
模拟器复制设备的硬件和软件，而模拟器仅模拟操作系统和用户界面。
设置和运行模拟器可能很复杂，而且它们往往运行缓慢。幸运的是，它们主要用于测试应用程序和游戏，而不是网站测试所必需的。
以前，您必须在计算机上安装模拟器软件才能运行测试。现在更容易了，因为有几种服务可以在云中在线运行。
这意味着您可以在几乎任何您想要的设备上运行任何浏览器来测试您的WordPress网站。
您可以尝试的一些服务包括：
- MobileMoxie – 使您能够在50多部手机上测试您的网站和移动搜索结果。您可以在有限的基础上免费使用该服务，或者以每月29美元的价格注册以进行无限制的实时测试。
- LambdaTest – 一个基于云的测试平台，可在多个设备上的数千个浏览器和操作系统上进行站点预览，并带有用于实时调试的工具。免费计划包括每月60分钟的测试，付费计划每月15美元起。
- BrowserStack – 这实际上不是一个模拟器，而是一项服务，可让您在云基础设施上的2,000多个浏览器和真实设备上测试您的网站。该服务每月收费39美元，但有免费试用。
审核和测试您的网站以确保它针对移动设备进行了优化
以上任何一种方法都可以让您查看您的网站在移动设备上的外观。但是，您可能需要再运行一些测试，看看您是否可以为移动用户做出任何其他改进。
谷歌移动友好测试
这个简单的在线工具将允许您输入任何URL，并让您知道它是否认为它“适合移动设备”。
要使用该工具，只需转到https://search.google.com/test/mobile-friendly并输入您要测试的站点上的页面的URL。
运气好的话，您会得到如下所示的响应：
如您所见，这还可以让您方便地预览您的网站在移动设备上的外观。虽然这只是一个截图，但如果有任何重大问题，它可以提醒您。
如果有任何加载问题或问题，您可以查看有关如何改进页面的完整详细信息和建议。
注意：绿色的“页面适合移动设备”并不意味着您已获得 Google 的批准印章，并且您的网站完全针对移动设备进行了优化。它只是让您放心，没有任何重大问题意味着它对于移动用户来说难以辨认或无法使用。
谷歌PageSpeed Insights
PageSpeed Insights是Google的另一个免费工具，它会根据您的网站在速度方面的优化程度为您的网站打分（如何做到PageSpeed Insights测试满分）。
您可以在移动设备和桌面设备之间切换（您将获得每个分数），该工具将为您提供一个列表，列出您可以采取哪些措施来加快您的网站速度，以及每个项目节省的估计时间。
MobiReady
MobiReady是一款免费工具，可在您的网站上运行移动就绪测试，并为您提供有关其运行情况的报告。
您可以将您的网站与竞争对手进行基准比较，并获得分析和建议您可以采取哪些步骤来改进您的网站以供移动用户使用。
如何使您的WordPress网站移动友好
如果您使用的是WordPress，那么您应该先拥有一个适合移动设备的网站。WordPress拥有内置工具，可确保您的网站多年来在移动设备上运行良好。
即便如此，您仍应采取一些步骤来确保您的WordPress网站为移动设备上的用户提供出色的体验。
1. 使用响应式WordPress主题
如果您使用的是定期更新的现代主题，那么您在这里可能没问题。
但是，如果您使用的是几年前的主题，您应该检查它是否为移动响应而构建。
如果您的网站没有重新格式化自身以在较小的尺寸下更易于阅读，请检查您使用的是最新版本的 WordPress 核心和您的主题。
如果更新没有帮助，您应该考虑切换到更现代、更适合移动设备的WordPress主题。
2. 确保你的插件也是响应式的
大多数插件不会影响您的网站在移动设备上的显示方式。但是，如果他们向您的网站添加任何视觉元素，您需要检查它们是否在小屏幕尺寸上正常工作。
同样，现代插件应该被设计为在移动设备上和在高分辨率下一样好。但这绝对是您在启动网站之前应该检查的内容。
对于插件来说，功能尤为重要。例如，如果他们向您的网站添加表单或小工具，请确保它易于在移动设备上导航和使用。
3.禁用移动设备上的弹出窗口
弹出窗口对于台式机或笔记本电脑上的用户来说可能是一种痛苦，但它们会使您的网站对移动用户完全无法使用。
来源：https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on
最好为移动用户完全禁用它们，而不是触发填充整个屏幕的弹出窗口。
谷歌实际上已经开始惩罚那些有侵入性弹出窗口掩盖底层内容的网站。所以最好完全避免它们。或者切换到只占用少量屏幕空间的横幅。
4.确保图像和视频正确缩放并且可以调整大小
媒体和媒体画廊在小屏幕上显示可能特别棘手。确保媒体元素在缩放时可见，或者如果它们不是必需的并且在移动设备上看起来不太好，请考虑禁用它们。
对于视频和图像画廊，请确保您使用的画廊插件考虑了移动体验。例如，用户应该能够浏览图片库。
如果图像或视频按比例缩小，则让用户可以轻松地以更大的尺寸查看它们。大多数移动用户都希望以全屏尺寸观看视频。
5.优化网站速度和性能
确保您的网站快速加载始终很重要。但是页面加载时间对于为移动用户提供良好的用户体验尤为重要。
移动用户经常在旅途中并希望快速访问信息。几年前的一项谷歌研究发现，如果页面在3秒内没有加载， 53%的移动用户会放弃该页面。随着互联网速度和技术的不断进步，用户每年都变得越来越不耐烦。
然而，平均网页在移动设备上的加载时间要长87.84%。
您可以做很多事情来加速您的WordPress网站和移动设备。您将从以下方面获得最大收益：
小结
您可以使用这些方法中的任何一种来测试您的WordPress网站在移动设备上的外观，但它们都不能准确地复制真实体验。
在启动新网站或进行任何重大更改之前，请确保至少在一部真正的智能手机上检查您的网站。
如果您已经利用了上面的一些预览方法，它应该看起来没问题。因此，只需确保您可以在网站上导航（确保检查按钮和可触摸区域），所有菜单都正确显示，并且任何表单或交互式小工具都可以正常工作。
然后，您可以满怀信心地启动您的网站，确保为桌面和移动用户提供出色的用户体验。
评论留言