css - 如何仅通过查看代码来确定网站是否响应？

Question

如何仅通过查看代码来确定网站是否响应？你会说如果 css 中至少有一个 @media 是响应式的吗？

我发现这个是为了寻找答案

The term responsive generally just indicates that the website uses CSS media selectors in order to modify its layout based upon device attributes. (source)

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

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

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

}

你说呢？是否有任何其他替代方法可以 100% 地说网站是响应式的？

感谢您的宝贵时间和答复

Answer 1

“通过查看代码”您永远无法绝对确定，但您可以从 CSS 和 Viewport 标记以及 HTML 元素的一般结构中获得很好的指示.

响应式几乎可以表示任何意思，例如，如果网站在诺基亚 C2 上无法正确显示或在原始 iPhone 上显示不正确，那么该网站是否“响应式”？它可能会响应，但不会响应那种类型的设备或那种显示分辨率。

响应式对您来说究竟意味着什么？您的目标设备是什么，不是？

有各种平台和设备 [例如旧手机] 不支持也不会支持 CSS3，因此只需检查 @media 查询(几乎总是使用 CSS3 规则元素)，您就可以减少 它不 起作用的可能性。

测试网站是否适用于所有设备的唯一真正方法是在尽可能多的设备上进行测试。有如此多的设备，每个设备对标准都有如此多的不同解释，仅仅因为一个网站被或不被广泛定义为“响应式”并不表示它将显示正如在每台设备上预期的那样。我曾见过一些网站在标准 iPad 上显示良好，但在廉价版 iPad 上显示效果稍差(几个像素)。

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

另外:

• 您打算进行哪种支票？您的空媒体查询示例似乎表明它是非人工检查中的自动检查，因此最好的方法可能是检查它是否在大显示器(> 800px 宽)上占据全屏尺寸，然后检查它通过了 Google 的 mobile testing tool .

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

• 查看 http://www.google.co.uk 的源代码，这个网站在我试过的所有设备(甚至诺基亚 C2!)上都能正确显示，但它没有显示视口(viewport)标签，也没有显示传统意义上的媒体查询，这个网站可能是个异常(exception)，但其他网站是相似的 - Facebook - 等等，关键是，没有 获得结果的方法 所以你必须 i) 非常具体地了解你正在寻找的内容对于和 ii) 接受这样一个事实，即您永远不会捕获超过 60-80% 的案例。

编辑:
有两种类型的“响应，有内联响应(比方说)网页在不重新加载任何东西的情况下 reshape 自身，然后是服务器响应(比方说) ) 服务器根据访问浏览器的要求大小/设备提供数据。您只能在您目前描述的庄园中检查内联响应，这意味着完全响应的网站，例如Facebook 将被您的测试工具排除在外。

根据您的评论进行编辑:
您的测试越“通用”，就会给越来越多的有效站点提供不正确的结果。例如，在某些 android 手机上的显示因浏览器而异(android 默认浏览器是裤子，但 Firefox 很好)，即使有人在 Android 手机上看到该网站和它显然没有正确呈现？