Responsive 在移动设备上的工作方式是否不同？

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 浏览器 window 的宽度时，这在桌面 Chrome 上工作正常。

但是，在以下两种情况下它不起作用：

当我将页面加载到我的服务器并在 iPhone 4S 的 Chrome 浏览器中以纵向模式打开它时。
当我右键单击 Chrome 中的页面并选择 "Inspect"，然后选择 "Toggle Device"（来自 Dev Tools）并选择各种 phone 肖像中的任何一个模式。尽管所有 phone 模式的宽度都在 600 像素以下。

什么给了？

Answer 1

对于iPhone(4s, 5 and 5s, 6, 6 Plus) 纵向媒体查询如下

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

也将 this link 用于 iPhone 媒体查询

Answer 2

This works fine on desktop Chrome when I shrink the width of the Chrome browser window.

However, it doesn't work in the following 2 circumstances:

When I load the page to my server and open it on the Chrome browser in my iPhone 4S in portrait mode.

当你有这样的症状时，你首先要检查的是你的文档头部有一个视口元标记

<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

祝你好运

Responsive 在移动设备上的工作方式是否不同？

Does Responsive work differently in mobile?

css

font-size

media-queries

google-chrome-devtools