如何只通过查看代码来确定网站的响应能力?

时间:2015-10-16 08:20:56

标签: css responsive-design

如何通过查看代码来确定网站的响应能力?你会说如果css中至少有一个@media有响应吗?

我找到了这个寻找答案

  

术语响应通常只表示网站使用CSS媒体选择器,以便根据设备属性修改其布局。 (source

我的观点是@media并不意味着100%的响应能力,但它是一个很好的指标。

假设css开发人员开始做响应,但将其留空。在这种情况下,检测到@media但网站仍然没有响应。

@media screen and (min-width: 601px) {

}

你怎么说?有没有其他替代方案可以100%表示网站是否有响应?

感谢您的时间和答案

2 个答案:

答案 0 :(得分:1)

你可以检查CSS文件中的@media并在Web源中找到这一行:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

http://www.w3schools.com/css/css_rwd_viewport.asp

答案 1 :(得分:1)

&#34;通过查看代码&#34; 您永远不会绝对确定,但您可以从CSS和Viewport标签以及一般信息中获得非常好的指示HTML元素的结构。

响应可以意味着几乎任何东西,例如,一个网站&#34;响应&#34;如果它没有在诺基亚C2上正确显示或者在原始iPhone上显示不正确?它可能是响应式的,但不是那种类型的设备或显示器的分辨率。

响应对您来说意味着什么?您的目标设备是什么,而不是您的目标?

有各种各样的平台和设备[比如旧款手机]不支持和不支持CSS3所以通过只检查@media查询(几乎总是使用CSS3规则元素)你只需减少工作的机会。

测试一个网站是否适用于每个设备的唯一真正方法是尽可能多地测试它。有很多设备,每个都有这么多不同的标准解释,只是因为一个网站被广泛定义为&#34;响应&#34;并不表示 按照预期在每台设备上显示。我见过的网站在标准iPad上显示效果不错,但在iPad的便宜版本上略微偏差(几个像素)。

最后,我认为这个问题非常广泛,可以成为基于意见的。

此外:

  • 您打算进行哪种检查?您的空媒体查询示例似乎表明它是非人检查中的自动检查,因此最好的方法是检查它是否占用了大屏幕上的全屏尺寸(&gt; 800px然后检查它是否通过了谷歌的mobile testing tool

  • 并不总是需要媒体查询,可能是网站使用服务器变量来确定输出屏幕大小然后加载自定义CSS文件的可能性处理它,然后根本不使用媒体查询。虽然现在我们拥有它们的可能性较小,但是当移动网络起飞并且一些网站可能仍然保留这种方法时,这是一件大事。 这些网站在所有/大多数浏览器/设备上都能正常显示,但它们实际上并不是内联响应

  • 查看http://www.google.co.uk的源代码,这个网站在我尝试过的所有设备上都能正确显示(甚至诺基亚C2!),但它没有显示Viewport标签,也没有显示传统意义上的媒体查询,这个网站可能是一个例外但其他网站是相似的 - Facebook等等,重点是,没有一种获取结果的方式

编辑:
有两种类型的&#34;响应,内联响应(让我们说)网页重塑自身而不重新加载任何内容,然后有服务器响应(让我们说)服务器根据访问浏览器的需求大小/设备提供数据。您只能在目前为止所描述的庄园中检查内联响应,这意味着您的测试工具将遗漏完全响应的网站,例如Facebook。

编辑与您的评论有关:
更多&#34;泛型&#34;您的测试将会越来越多,有效的网站会得到错误的结果。例如,在一些Android手机上显示是不同的取决于哪个浏览器(Android默认浏览器是裤子,但Firefox很好),所以你的工具给那个网站一个清楚,即使Android手机上有人看到&#39;该网站,它显然无法正确呈现?