自适应布局移动问题

时间:2016-09-29 08:02:41

标签: html css mobile responsive-design adaptive-design

我有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' />
&#13;
&#13;
&#13;

当我更改浏览器窗口大小时,以及在多个响应式布局测试页面中测试它时,它在我的桌面上完美运行。
问题:在我的移动设备(iphone 5)上无法在任何浏览器中运行:它使用错误的布局来显示屏幕尺寸。 atm无法在其他设备上进行测试。
有什么建议吗?

1 个答案:

答案 0 :(得分:0)

检查HTML代码中的元标记

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

然后只有它才能在设备上运行

请参阅以下链接

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