使用 JavaScript 确定网站是否在移动设备上响应 [关闭]答案

【问题标题】：Determine if a site is responsive on mobile using JavaScript [closed]使用 JavaScript 确定网站是否在移动设备上响应 [关闭]
【发布时间】：2015-07-21 15:38:01
【问题描述】：

确定网站是否响应式的最佳方法是什么？

This answer 详细检查 @media 查询，这有点准确。但是检查@media 查询可能并不总是有效，因为：

a) 响应式网站不一定需要媒体查询（例如，它们可能会嗅探用户代理并基于它生成不同的 HTML）

b) 媒体查询可能只会影响页面的一小部分（例如页脚）

也许比较来自不同用户代理的 HTML 也会给出一个很好的指示？或者检查媒体查询内容的大小（例如，如果它很大，可能会影响页面的很大一部分）。

【问题讨论】：

在设备中打开它？浏览器是否欺骗了设备？
虽然使用 JavaScript。 IE。以编程方式。（描述确实说明了，现在也更新了主题）
所以你想以某种方式将从某个 URL 获取的内容提供给 JavaScript 程序，并让它输出响应或不响应？似乎第一个问题是确定“响应式”的客观定义。
让一个软件确定一个网站是否“运行良好”似乎相当困难。（例如，水平滚动并不一定不好；它完全取决于网站的设计方式。）
@K.P.从技术上讲，纯 HTML 网站是响应式的，例如：info.cern.ch

标签： javascript html css mobile responsive-design

【解决方案1】：

HTML 中最大的提示是判断一个网站是否具有某种响应性，即元视口（它用于控制移动浏览器上的布局）。这并不意味着该网站可以在不同的浏览器尺寸/设备上正常运行。

你可以检查一下。

if(document.querySelector('meta[name="viewport"][content*="width=device-width"]') !== null){
     //if is true do something
}

【讨论】：

这是个好主意。但我想检查 viewport 元标记的值是否包含这个特定的字符串：“width=device-width”。
如果 HTML 文档加载了任何 CSS，您可能还需要解析它并检查 @viewport 的使用情况。这最终将替换视口元标记。 developer.mozilla.org/en-US/docs/Web/CSS/@viewport
@K.P 我更改了代码以检查“width=device-width”
感谢@CarlaFrança，这绝对是决定响应能力的一个因素。没有这个的网站可能会被认为没有响应。问题是一些网站可能有这个但没有响应。
@CarlaFrança 用width=device-width 检查元视口怎么样？ document.querySelectorAll('head meta[name="viewport"][content*="width=device-width"]').length > 0