Question

仅出于实验目的，我配置了以下media query：

  @media only screen and (max-width: 600px) {
      .fontresize { font-size: 3em; }
  }


  <table style="width: 100%;" border="0">
    <tbody>
      <tr>

        <td width="50%"><a href="food.html" class="fontresize">Food</a></td>
        <td width="50%"><a href="candles.html" class="fontresize">Candles</a></td>

      </tr>
    </tbody>
  </table>

当我缩小Chrome浏览器窗口的宽度时，这在桌面Chrome上运行良好。

但是，它在以下两种情况下无效：

当我将页面加载到我的服务器并在我的iPhone 4S中以纵向模式在Chrome浏览器上打开它时。
当我右键单击Chrome中的页面并选择＆＃34;检查＆＃34;，然后选择＆＃34;切换设备＆＃34; （来自Dev Tools）并选择任何一种手机肖像模式。尽管事实上所有手机模式的宽度都不到600px。

是什么给出了？

Answer 1

对于iPhone（4s，5和5s，6,6 Plus）的纵向媒体查询，如下所示

@media only screen and (max-device-width : 667px) and (orientation : portrait) 
{
 .fontresize { font-size: 3em; }
}

还可以使用this链接进行iPhone媒体查询

Answer 2

当我缩小屏幕的宽度时，这在桌面Chrome上工作正常   Chrome浏览器窗口。

但是，它在以下两种情况下无效：

当我将页面加载到我的服务器并在Chrome浏览器中打开它时   我的iPhone 4S处于纵向模式。

如果出现这样的症状，首先要检查的是文档头部有一个视口元标记

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....  
</head>

更多信息：http://www.w3schools.com/css/css_rwd_viewport.asp

祝你好运

响应在移动设备中的工作方式有所不同吗？

2 个答案: