C语言的响应式网页设计检测

2条回答

网友

1楼 · 编辑于 2024-05-05 02:13:52

我的投票将是搜索页面头

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

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

祝你好运！在

网友

2楼 · 编辑于 2024-05-05 02:13:52

我有一个项目，在这个项目中，我需要使网站响应而不接触任何html标记和编程代码，我唯一能修改的就是一个样式表和一个javascript文件。我甚至不知道哪个是网站的所有页面，因为这对我来说是一个新项目。在

所以我们的目标是让它具有响应性，这样googlecrawler就不会惩罚这个网站。在

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

好吧，我所做的是要求一个网站管理员工具导出最重要的网站链接，数百个。在

然后我构建了一个小的“工具”，它可以做我认为Google Responsive Test所做的事情，但是这个工具会接受一个url列表，如果它们适合320px的屏幕（iframe），它会循环并测试每个url。在

这是你刚刚打开的HTML工具，在文本框中输入URL，然后点击Start！(响应检查器.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>

此脚本必须加载并在要检查的网站上运行：

^{pr2}$

将以下内容放在jquery ready的末尾：

responsiveChecker.check();

最后，它是如何工作的：

在要检查的网站上添加responsiveChecker javascripts
你打开响应检查器.html文件，在文本区域添加站点的url并点击Start
它将开始逐个加载iframe中的url，并在浏览器的Console选项卡上记录一个“success”、“warning”或“error”，这意味着它要么响应，要么可能响应，要么没有响应。在

告诉我你的想法！在

顺便问一下，如果我们清理它并建立一个真正的实时工具/服务，人们可以用来测试他们的网站的响应能力，有人认为这会有用吗？在

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

相关问题更多 >

编程相关推荐

热门问题

热门文章