0

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

href="css/bootstrap.min.css"

或者

class="row-fluid"

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

任何帮助，将不胜感激。

4

2 回答 2

2

我的投票是搜索页面标题

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

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

祝你好运！

于 2013-07-10T19:25:44.710 回答
0

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

所以我们的目标是让它响应，这样谷歌爬虫就不会惩罚这个网站。

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

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

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

这是您刚刚打开的 HTML 工具，在文本框中输入网址，然后点击开始！（响应检查器.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();

所以最后它是如何工作的：

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

让我知道你的想法！

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

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

于 2015-10-04T17:34:45.973 回答