切换到设备视图时，Chrome开发人员工具无法加载@media查询

Question

我在CSS中有这个@media查询：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-fixed table-hover table-condensed" border='1' id="myTable1">
    <thead>
      <tr>
        <th rowspan = '2' >Date Comm.</th>
        <th rowspan='2' >Drug</th>
        <th  rowspan='2' >Dosage</th>
        <th  rowspan='2'>Route Of Admin</th>
         <th  rowspan='2' >Delete</th>
        </tr>
    </thead>
    <tbody class="tbody1">

   
    </tbody>
     <tr id="hiderow">
		    <td>
        <input type='text' id='row_count'/><button id='add'>Add Row</button></td>
		  </tr>
		  
    </table>

当我手动调整页面大小时，它会在达到767px断点时切换到自适应布局。

但是，当我从Chrome的下拉列表中选择任何设备布局时

即使设备的宽度小于767px断点，也会加载默认页面而不是媒体查询。我做错了什么？

Answer 1

试试这个

<meta name="viewport" content="width=device-width">