自适应布局移动问题

Question

我有3种不同浏览器宽度的可选布局。在我的index.html中用CSS编码如下：

​

<link rel='stylesheet' media='screen and (max-width: 640px)' href='narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 641px) and (max-width: 1200px)' href='med.css' />
<link rel='stylesheet' media='screen and (min-width: 1201px)' href='wide.css' />

​

当我更改浏览器窗口大小时，以及在几个响应性布局测试页面中测试它时，它在我的桌面上工作得很好。

问题:在任何浏览器中，都不能在我的移动设备(IPhone5)上工作:它对屏幕大小使用了错误的布局。atm不能在其他设备上进行测试。

有什么建议吗？

Answer 1

检查HTML代码中的元标记，它应该是

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

那么只有它才能在设备上工作。

请参阅以下链接

https://css-tricks.com/snippets/html/responsive-meta-tag/