所以我正在根据用户设备创建响应式设计网站，但是在 iPhone 5C 上查看网站时，智能手机版本的 css 链接 css/smartphone/header.css不起作用，平板电脑也不起作用 css/tablet/header.css文件。它只是在手机上显示桌面版本(我不想要)。但是当我在 Google Developer 的“Dimensions”扩展上查看网站时，它允许您模拟移动设备(在本例中为 iPhone 5)，CSS 链接按预期工作。
有人能告诉我我的 css 链接有什么问题导致它们不能在 iPhone 5 上工作吗？谢谢
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1024px)' href='css/desktop/header.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 200px) and (max-width: 767px)' href='css/smartphone/header.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 1023px)' href='css/tablet/header.css' />
最佳答案
尝试:<meta name="viewport" content="width=device-width, initial-scale=1.0" /> .有关详细信息，请参阅 MDN 上的这篇文章:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag .
关于CSS 链接不适用于响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25222988/