爬虫的响应式网页设计检测答案

【问题标题】：Responsive Web Design Detection for Crawler爬虫的响应式网页设计检测
【发布时间】：2013-07-10 18:36:35
【问题描述】：

我正在编写一个网络爬虫，但我只关心具有响应式网页设计 (RWD) 的页面。是否有迹象表明该网站具有响应性？我在 python 中使用 mechanize 模块。我唯一能想到的就是在 html 中寻找类似的东西

href="css/bootstrap.min.css"

或

class="row-fluid"

或表示百分比而不是像素的东西。

任何帮助将不胜感激。

【问题讨论】：

你也可以寻找媒体查询...不确定是否有一个好的标准来检查是响应...
不幸的是，寻找指标很可能不会有帮助，因为你会得到很多错误的匹配。很容易查看页面上的 css（可能还有 js）来确定这一点，但导入的 css 很难绕过，除非该站点使用在线下载而不是将其放在他们的服务器上

标签： python responsive-design mechanize web-crawler

【解决方案1】：

我的投票是搜索页面标题

<meta name="viewport" content="width=device-width, initial-scale=1.0" *** wildcard-selector-here *** >

我认为这比搜索 CSS 媒体查询的存在更容易、更准确。

祝你好运！

【讨论】：

【解决方案2】：

我有一个项目，我需要在不触及任何 html 标记和编程代码的情况下使网站具有响应性，我唯一可以修改的是样式表和 javascript 文件。我什至不知道网站的所有页面是什么，因为这对我来说是一个新项目。

所以我们的目标是让它具有响应性，这样 Google 抓取工具就不会惩罚该网站。

所以我知道我可以手动将https://www.google.com/webmasters/tools/mobile-friendly/ 用于我想要测试的页面。但是我怎样才能测试整个网站呢？

我所做的是要求网站管理员工具导出网站最重要的链接，其中有数百个。

然后我构建了一个小型“工具”，它可以完全按照我认为 Google 响应式测试所做的那样工作，但是这个工具会接受一个 url 列表，如果它们适合 320 像素的屏幕，则会循环并测试它们中的每一个（ iframe)。

这是您刚刚打开的 HTML 工具，在文本框中输入网址，然后点击开始！ (responsiveChecker.html)

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <title>Responsive Checker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.google.com/jsapi"></script>
    <script>

      var urls;
      var delay=3000;

      google.load("jquery", "1");

      google.setOnLoadCallback(function() {    
        // Place init code here instead of $(document).ready()   
        console.log('jquery loaded');


        $('#responsiveFrame').load(function(){
            if (urls.length > 0) {
              setTimeout(function(){ checkUrl(); }, delay);
            }
        });

      });



      function startChecking() {
        var textUrls=$('#urls').val();
        urls= textUrls.match(/[^\r\n]+/g);
        checkUrl();
      }

      function checkUrl() {
        var url;
        if (urls.length > 0) {
          url=urls[0];
          console.log("checking: "+url);
          $('#responsiveFrame').attr('src',url+'#rc=1');
          urls.splice(0, 1);

        } else {
          console.log("no more urls");
        }

      }

    </script>
  </head>
  <body>

    <iframe id="responsiveFrame" width="320" height="480" src="about:blank" style="border: 1px solid red;" scrolling="no"></iframe>

    <p>
      <label for="urls">Enter URLs to check, one per line:</label><br />
      <textarea id="urls" rows="30" cols="100"></textarea>
    </p>

    <p>
      <input type="button" value="Start checking!" onclick="startChecking();">
    </p>

  </body>
</html>

这是一个必须在您要检查的网站上加载并运行的脚本：

var responsiveChecker = new function () {
  this.width = 320;
  this.hashParams={};
  this.check = function () {
    this.hashParams=this.parseHashBangArgs();
//    this.log('responsiveChecker');
//    this.log(this.hashParams);
    if (!this.mustCheck()) {
      return;
    } else {

      this.updateParams();

      this.log('must check!');

      var that = this;
      var counter=0;
      var visibleCounter=0;

      jQuery("*").each(function() {
          if (jQuery(this).width() > that.width) {

              if ('SCRIPT' === this.tagName) {
                // ignore script tags
              } else {
                that.log(this.tagName + "#" + this.id);
                counter++;
                if (jQuery(this).is(":visible")) {
                  visibleCounter++;
                  that.log(this.tagName + "#" + this.id);
                }
              }


          }
      });

      var page=window.location.href;

      if (visibleCounter > 0) {
        this.log('[ERROR] page not responsive, there are elements bigger than screen size: '+page);
      } else {
        if (counter > 0) {
          this.log('[WARNING] hey check the above list, there are some hidden elements with size bigger than the screen: '+page);
        } else {
          this.log('[SUCCESS] ¡todo bien! looks like all elements fit on the screen: '+page);
        }
      }

    }
  };
  this.updateParams = function () {
    if (typeof(this.hashParams.width) !== 'undefined') {
      this.width=parseInt(this.hashParams.width);
    }
  };
  this.mustCheck = function () {
    if (typeof(this.hashParams.rc) !== 'undefined') {
      return true;
    }
    return false;
  };
  // https://gist.github.com/miohtama/1570295
  this.parseHashBangArgs = function() {

    var aURL = window.location.href;

    var vars = {};
    var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');

    for(var i = 0; i < hashes.length; i++) {
       var hash = hashes[i].split('=');

       if(hash.length > 1) {
           vars[hash[0]] = hash[1];
       } else {
          vars[hash[0]] = null;
       }      
    }

    return vars;
  };
  this.log = function (msg) {
    console.log(msg);
  };
};

把它放在准备好的jquery的末尾：

responsiveChecker.check();

那么最后它是如何工作的：

您在要检查的网站上添加 responsiveChecker javascripts
您打开 responsiveChecker.html 文件，在 textarea 中添加网站的 url，然后点击开始
它将开始一个一个地加载 iframe 中的 url，并在浏览器的控制台选项卡上记录“成功”、“警告”或“错误”，这意味着它要么是响应式的，要么可能，也可能没有响应。

让我知道你的想法！

顺便说一句，如果我们清理它并构建一个人们可以用来测试其网站的响应能力的真实实时工具/服务，是否有人认为这会有用？

哦，顺便说一句：实际检查是使用 jQuery 完成的，通过测试页面中宽度小于或等于 320 像素的所有元素。事实上，这不是 100% 的保证，但我认为 Google 的机器人可能会做类似的事情，但我确信它更复杂。

【讨论】：