Question

我尝试使用chrome dev工具检查响应式设计。但这不起作用。

当我调整浏览器大小时，同样的工作正常。

我无法确定可能出现的问题？有人可以帮我确定问题吗？

代码低于

＆＃13;

$(document).ready(function(){
  $("#filter").keyup(function(){
    var count = $(this).val().length;

    if(count <= '2'){    
      var filter1 = $(this).val();
      $(".filter").each(function(){
        if ($(this).text().search(new RegExp(filter1, 'i')) < 0) {
          $(this).fadeOut();            
        } else {
          $(this).show();
        }   
      });
    }

    if(count >= '3'){
      var filter = $(this).val();

      $(".filter").each(function(){
        if ($(this).text().search(new RegExp(filter, 'i')) < 0) {
          $(this).fadeOut();            
        } else {
          $(this).show();
        }        
      });        
    }    
  });
});

＆＃13;

屏幕截图如下。

检入Galaxy s5

通过调整屏幕大小来检查

Answer 1

将viewport meta添加到头标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<强> VIEWPORT

视口是用户在网页上的可见区域。

视口因设备而异，在手机上比在电脑屏幕上小。

在平板电脑和手机之前，网页仅针对计算机屏幕设计，网页通常采用静态设计和固定大小。

然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大而无法容纳视口。要解决此问题，这些设备上的浏览器会按比例缩小整个网页以适应屏幕。

使用chrome dev工具的响应式设计。但那不起作用

CNTRL + F5（强制刷新网页）然后检查它。

Answer 2

您可能需要在脑中添加视口元素。

<meta name="viewport" content="width=device-width, initial-scale=1">

响应式设计不工作chrome dev工具，但浏览器确实如此

2 个答案: