手机上响应宽度太小，但在桌面浏览器上还可以

Question

我正在练习响应式网页设计。从我到目前为止所了解到的情况来看，它围绕着带有流体组件的流体网格和 CSS 媒体查询。

当我缩小浏览器时，该网站看起来就像我希望它在手机上的样子：

但是，当在我的手机上，放在我的网络服务器上后，它看起来完全不同：

我认为宽度和设备宽度之间正在发生一些冲突。有谁知道出了什么问题吗？

这就是我加载样式表的方式：

<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 600px), screen and (max-device-width: 600px)" /> 

Answer 1

没有视口元标记就没有响应

<meta name="viewport" content="width=device-width, user-scalable=no">

有关视口元标记的更多信息 https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag