出于实验目的，我配置了以下媒体查询:
@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 中右键单击页面并选择“检查”，然后选择“切换设备”(来自开发工具)并选择各种手机纵向模式中的任何一种。尽管所有手机模式的宽度都在 600 像素以下。
什么给了？
最佳答案
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.
当你有这样的症状时，你首先要检查的是你的文档头部有一个视口(viewport)元标记
<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
祝你好运
关于css - Responsive 在移动设备上的工作方式是否不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40601874/