手机上的响应宽度太小,但在桌面浏览器上没问题

时间:2014-06-13 00:21:28

标签: html css responsive-design

我正在练习响应式网页设计。根据我迄今为止所学到的知识,它围绕着一个带有流体组件和CSS媒体查询的流畅网格。

当我缩小浏览器时,网站看起来就像我想要在手机上看起来一样:

browser

但是,在我的手机上放入我的网络服务器后,它看起来完全不同:

enter image description here

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

这就是我加载样式表的方法:

<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)" /> 

1 个答案:

答案 0 :(得分:2)

没有视口元标记

时没有响应
<meta name="viewport" content="width=device-width, user-scalable=no">

有关viewport元标记https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

的更多信息