回到主页

如何判断网站是自适应还是响应

有时,确定网站使用的移动配置可能很棘手。值得庆幸的是,专栏作家Bryson Meunier分享了几种识别响应和自适应网站的方法。

正如大多数SEO都知道的那样,服务移动网站内容有三种主要技术:响应式设计,自适应设计(也称为动态服务)和单独的移动URL。

虽然只需查看浏览器的地址栏就可以轻松识别单独的移动网址,但是将响应式和自适应网站分开可以进行更多的挖掘。

在今年早些时候在SMX West与SMX Advanced的Shari Thurow 举办的移动研讨会上,许多参与者对如何区分响应式和自适应移动配置感到困惑。所以,我经历了今天要描述的练习。希望它能帮助你们中的一些人做出区分。

如果您不确定您所查看的网站是否具有响应性或适应性,请问自己以下问题:

当您从台式计算机调整浏览器大小时,它会改变形状吗?
响应式站点旨在根据浏览器窗口大小(无论设备如何)更改布局,而自适应站点会检测您何时在移动设备上并相应地显示不同的HTML。因此,如果您知道某个站点不为其移动配置使用单独的URL,您通常可以通过访问桌面上的站点并查看调整浏览器窗口大小时发生的情况来区分响应和自适应。

想测试一下吗?采取以下步骤:

在您选择的浏览器中打开WebMD.com或mw.com(以下视频使用Chrome)。确保您的浏览器窗口不是全屏 - 换句话说,您应该能够看到它背后的桌面。
将光标放在浏览器窗口的右边缘,然后将窗口调整到适合手机显示屏大小的大小。

如您所见,即使在桌面上,布局也会根据您的浏览器窗口大小而变化。这意味着这些网站都有响应。
相比之下,如果您在自适应桌面上使用Amazon.com执行相同操作,则屏幕右侧的内容将被隐藏,而不是调整大小或移动到其他位置。

你能在主页源代码中找到“responsive”或“@media”这个词吗?
响应式站点在其HTML源代码中具有自适应站点不具有的特定元素。要检查这些元素,请执行以下步骤:

在Chrome,移动设备或桌面设备上打开WebMD.com。
如果在桌面上,您可以按CTRL + U(Windows)或Option +⌘+ U(Mac)查看页面的源代码。对于移动用户,您可以转到地址栏并在根域之前添加view-source :(例如,view-source:www.webmd.com)并按Enter键以打开源代码。
在页面中搜索“响应”一词,该词存在于页面上以调出响应式模板和样式表。单击响应样式表,该样式表应该是可单击的链接。

在CSS页面上,搜索“@media” - 这些的存在表明这是CSS媒体查询,它们为响应式站点提供动力。

网站是否在移动设备上显示不同的内容或不同的布局(或者当您使用Googlebot智能手机等移动用户代理时)?
无论屏幕大小如何,自适应网站都会根据用户的设备为网页生成不同的HTML。这意味着,如果您正在查看移动设备上的自适应网站 - 即使是大屏幕上的自适应网站 - 您仍然可以获得特定的移动内容。

我们可以通过桌面浏览器检查自适应移动页面。这是通过使用浏览器扩展来实现的,该扩展允许您像使用移动设备一样查看站点。

以下是在Chrome上使用用户代理切换器扩展程序测试自适应页面的方法:

在桌面上打开Chrome,然后下载并安装用户代理切换器扩展程序。我推荐Google Chrome的User-Agent Switcher。
安装扩展程序后,请导航至www.amazon.com。
点击右上角的扩展程序图标,然后使用下拉菜单将用户代理更改为热门移动用户代理,例如Android Mobile上的Chrome。
 

  1. 请注意,切换用户代理后导航已更改,并且标题图像的大小减小。当您调整浏览器窗口的大小时 - 即使它非常大 - 它也不会以流畅的方式改变,但会在同一图像周围创建更多的空白区域。这是一个基于用户代理更改其布局的自适应站点。
    请记住,许多网站都会存储Cookie以记住您的设备类型,因此在切换用户代理后使用用户代理清除浏览器历史记录时,这是最佳做法。
    其他问题
    以下是我在这个问题上可能感兴趣的一些相关问题:

    您是否可以使用Chrome开发者工具告知自适应网站的自适应?
    是的,但在将设备类型从桌面切换到移动之前,请确保清除浏览历史记录,反之亦然。然后,按照以下步骤操作:

    在桌面上打开Chrome中的amazon.com。
    通过单击浏览器右上角的三个垂直点打开Chrome开发人员工具,然后向下滚动到更多工具>开发人员工具。
    进入开发人员工具后,单击步骤2中单击的三个垂直点,然后选择添加设备类型

将设备设置为“响应”,将设备类型设置为“桌面”。这允许您通过向右拉动滑块来调整浏览器的大小,模仿上面的练习。您还可以将设备类型从桌面更改为移动设备,这样您就可以模拟上面的练习三,而无需安装单独的用户代理切换器。如上所述,如果桌面和移动用户代理的布局看起来不同,则它是自适应的,如果在拉动窗口的角落时站点调整大小以适应屏幕,它也会响应。
网站可以同时具有适应性和响应性吗?
是。有时这被称为RESS或RE赞助S erver S ide元素。在这些情况下,布局是流动的,但服务器端元素可用于为应用程序下载提供智能横幅或更改页面上的文本。

Zillow.com目前是这样的。如果您使用桌面代理访问该站点,则可以调整浏览器的大小,并且该站点具有响应性,就像merriam-webster.com一样。但是,如果您从智能手机访问该网站,则用户代理检测用于提供其他特定于设备的元素,如智能横幅,以鼓励应用下载。

同样,在Vivid Seats,我们的桌面版网站不会调整大小,但如果您从移动用户代理访问自适应网站,则可以。因此,我们的自适应网站也具有响应性。

您还可以在同一站点上拥有自适应和响应式页面。在Vivid Seats,我们对事件页面使用响应式页面,因为搜索行为在不同设备之间的变化不大,但对某些类别页面具有适应性,我们注意到我们要在页面上寻址的搜索行为存在差异。

所有文章
×

还剩一步!

确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

好的