响应式网站设计-判断某个网站是否具有适应性或响应能力

移动营销 2018年04月25日

大多数SEO操作员目前都知道,有三种主要技术可用于提供移动网站内容:响应式网站设计,自适应设计(也称为动态提供内容)和单独的移动URL。

虽然通过查看浏览器的地址栏很容易识别单独的移动URL,但如果要区分响应式和自适应网站,要多花一点时间。

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

从台式计算机调整浏览器大小时它会改变形状吗?
响应式网站旨在根据浏览器窗口大小(不管设备)来更改布局,而自适应网站会检测您是否使用移动设备,并相应地呈现不同的HTML。因此,如果您知道某个网站的移动配置不使用单独的网址,则可以通过访问PC端网站并查看调整浏览器窗口大小时发生的情况,来分辨响应性和适应性。

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

1. 在Chrome,手机或台式电脑上打开网站。
2. 如果在电脑上,可以按CTRL + U(Windows)或Option +⌘+ U(Mac)查看页面的源代码。对于移动用户,您可以转到地址栏并在根域之前添加view-source(例如,view-source:www.webmd.com):并按确认键打开源代码。
3. 在页面上搜索“responsive”一词,这个词是用作调出响应式模板和样式表。点击响应式样式表,这应该是一个可点击的链接。
4. 在CSS页面上,搜索“@media” - 如果找到了,这些就是CSS Media Queries,也就是表示这是响应式网站。

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

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

以下是如何在Chrome上使用用户代理切换器扩展程序测试自适应网页:

1.在桌面上打开Chrome,然后下载并安装用户代理切换器扩展。推荐User-Agent Switcher for Google Chrome.
2.安装了扩展程序之后,请导航到www.amazon.com。
3. 点击右上角的扩展程序图标,然后使用下拉菜单将用户代理更改为流行的移动用户代理,例如Android Mobile上的Chrome。
4. 请注意,切换用户代理后,导航已更改,并且标题图像的大小缩小。当您调整浏览器窗口的大小时(即使它变得非常大),它的更改不会很流畅,但会在同一图像周围创建更多空白区域。这是一个自适应网站,根据用户代理更改其布局。
5. 请记住,很多网站通过存储Cookie来记住您的设备类型,所以在切换用户代理后使用用户代理清除浏览器历史记录是最佳做法。