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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 来自帖子和页面编辑器(并非总是准确)
  2. 来自 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 美元,但可以免费试用.

审核和测试您的网站以确保它针对移动设备进行了优化

上述任何一种方法都可以让您查看您的网站在移动设备上的外观.不过,您可能还想再运行一些测试,看看您是否可以为移动用户做出任何其他改进.

Google 移动设备友好测试

这个简单的在线工具允许您输入任何网址,并让您知道它是否认为它"适合移动设备".

要使用该工具,只需转到 https://search.google.com/test/mobile-friendly 并输入您要测试的网站页面的网址.

运气好的话,你会得到类似这样的回复:

如您所见,这还可以让您方便地预览您的网站在移动设备上的外观.虽然这只是一个截图,但如果有任何重大问题,它会提醒您.

如果有任何加载问题或问题,您可以查看有关如何改进页面的完整详细信息和建议.

注意:绿色的"页面适合移动设备"并不意味着您已获得 Google 的批准印章,并且您的网站完全针对移动设备进行了优化.它只是让您放心,没有任何重大问题意味着移动用户无法辨认或无法使用它.

Google PageSpeed 见解

PageSpeed Insights 是 Google 提供的另一个免费工具,它会根据您的网站在速度方面的优化程度为您提供 100 分的评分.

您可以在移动设备和桌面设备之间切换(您将获得每个分数),该工具会为您提供一个列表,列出您可以采取哪些措施来加快您的网站速度,并为您节省估计时间.

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

与其触发填满整个屏幕的弹出窗口,不如为移动用户完全禁用它们.

实际上,Google 已经开始惩罚具有侵入性弹出窗口的网站,这些弹出窗口掩盖了底层内容.所以最好完全避免它们.或者切换到只占用少量屏幕空间的横幅.

4.确保图像和视频正确缩放并且可以调整大小

媒体和媒体库在小屏幕上显示可能特别棘手.确保媒体元素在缩放时可见,或者考虑禁用它们,如果它们不是必需的并且在移动设备上看起来不好看.

对于视频和图片库,请确保您使用的是已考虑移动体验的库插件.例如,用户应该能够在图片库中滑动.

如果图片或视频被缩小了,让用户可以轻松地以更大的尺寸查看它们.大多数移动用户尤其希望以全屏尺寸观看视频.

5.优化网站速度和性能

 确保您的网站快速加载始终很重要.但页面加载时间对于为移动用户提供良好的用户体验尤为重要.

移动用户通常在旅途中,希望快速访问信息.几年前的一项 Google 研究发现 53% 的移动用户会在页面未加载时放弃3 秒内.随着互联网速度和技术的不断改进,用户每年都变得越来越不耐烦.

然而,平均网页需要 在移动设备上加载时间延长 87.84%.

您可以做很多事情来加速您的 WordPress 网站一般和移动设备.您将从以下方面获得最大收益:

  1. 选择一个好的网络主机
  2. 优化图片
  3. 使用 CDN

最后的想法

您可以使用这些方法中的任何一种来测试您的 WordPress 网站在移动设备上的外观,但它们都不能准确复制真实体验.

在推出新网站或进行任何重大更改之前,请确保您至少在一部真正的智能手机上检查过您的网站.

如果你已经利用了上面的一些预览方法,它看起来应该没问题.因此,只要确保您可以浏览网站(确保检查按钮和可触摸区域)、所有菜单都正确显示,并且所有表单或交互式小部件都正常工作.

然后,您可以满怀信心地启动您的网站,因为您已竭尽全力确保为桌面和移动用户提供出色的用户体验.

1
订阅评论
提醒
0 评论
内联反馈
查看所有评论