响应式网站 - 如何调试无响应的响应式CSS？

Question

我正在开发一个需要4种不同布局的项目：

• 桌面+笔记本;
• 平板电脑风景;
• 平板电脑肖像;
• 移动。

出于测试目的，我正在使用Opera浏览器及其页面缩放。在Opera（以及笔记本电脑上的所有其他浏览器）中，当我放大和缩小页面时，布局会正确更改。但是当我用智能手机和平板电脑打开同一页面时，它只显示桌面布局。我项目的临时地址是：

http://tiip.dit.rs/tiip2

有没有人有任何想法我做错了什么？

Answer 1

尝试添加元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以通过googleing获取有关此标记的更多信息以及您需要它的原因 “viewport meta tag”

Answer 2

如果打开开发人员工具，在chrome中，右下角有一个小齿轮。在设置中，您可以选择用户代理，这将使chrome的行为类似于不同的设备。希望这有助于

Answer 3

我认为此链接可能对您有所帮助

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

最初是你的HTML

添加

 <meta name="viewport" content="width=device-width, initial-scale=1.0">