我如何才能确保仅通过查看代码即可响应网站?您是否可以说CSS中至少有一个@media可以响应?
我发现这个在寻找答案
术语“响应式”通常仅表示网站使用CSS媒体选择器,以便根据设备属性修改其布局。 (source)
我的观点是@media并不意味着100%的响应度,但这是一个很好的指标。
假设CSS开发人员开始做出响应,但将其留空。在这种情况下,将检测到@media,但网站仍然没有响应。
@media screen and (min-width: 601px) {
}
你说什么?还有其他选择可以说100%网站是响应式的吗?
感谢您的时间和答复
最佳答案
“通过查看代码”绝对不会确定,但是您可以从CSS和Viewport标记以及HTML元素的一般结构中获得很好的指示。
响应式几乎可以表示任何内容,例如,如果网站在诺基亚C2上无法正确显示或在原始iPhone上显示不正确,则该网站是否“响应”?它可能是响应性的,但仅对那种类型的设备或显示器的分辨率没有响应。
响应式实际上对您意味着什么?您瞄准的是什么目标设备,您不是瞄准的?
有各种各样的平台和设备(例如较旧的手机)不支持CSS3,因此仅检查@media查询(几乎总是使用CSS3规则元素),就可以减少不起作用的可能性。 。
测试网站是否可在每种设备上运行的唯一真实方法是尽可能多地测试它。有太多的设备对标准有不同的解释,以至于仅仅因为一个网站被广泛定义为“响应式”或不被广泛定义为“响应式”,并不表示该网站将按预期显示在每个设备上。我看过的网站在标准iPad上的显示效果很好,但在廉价的iPad上却略有不足(几个像素)。
最后,我认为这个问题非常广泛,可以成为基于意见的问题。
另外:
您打算哪种支票?您的媒体查询为空的示例似乎表明它是一种自动检查,就像在非人工检查中一样,因此最好的方法可能是检查它是否占用了大显示器(> 800px宽)上的全屏尺寸,然后检查它通过了Google的mobile testing tool。
并非总是需要媒体查询,站点可能会使用服务器变量来确定输出屏幕的大小,然后加载自定义CSS文件来处理该问题,从而根本不使用媒体查询。 。虽然现在有了它们的可能性较小,但是当移动网络起飞时这是一件大事,有些站点可能仍保留这种方法。这些网站可以在所有/大多数浏览器/设备上正确显示,但实际上它们不是内联响应的。
查看http://www.google.co.uk的源代码,该网站可以在我尝试过的所有设备上正确显示(甚至是诺基亚C2!),但是它不显示Viewport标签,也不显示传统意义上的媒体查询,此网站可能是一个例外,但其他网站都非常相似-Facebook-等等,重点是,没有一种方法可以得到您的结果,因此您必须做到:i)对要寻找的内容非常明确; ii)接受这样您就不会发现约60-80%的案例。
编辑:
有两种类型的“响应式”,即内联响应式(假设),网页在不重新加载任何内容的情况下重塑自身,然后有服务器响应式(假设),其中服务器根据需求的大小/设备提供数据您只能在到目前为止描述的方式中检查内联响应式,这意味着您的测试工具将忽略诸如Facebook之类的完全响应式网站。
根据您的评论进行编辑:
您的测试越“通用”,就会给越来越多的有效站点带来不正确的结果。例如,某些Android手机上显示的内容会因浏览器的不同而有所不同(Android默认浏览器为裤子,但Firefox可以使用),因此即使Android手机上有人看到了该网站,您的工具也能使该网站保持清晰它显然不能正确渲染吗?