Question

所以我根据用户设备创建响应式设计网站，但是当在iPhone 5C上查看网站时，智能手机版css/smartphone/header.css的css链接不起作用，平板电脑也不起作用{ {1}}文件。它只显示手机上的桌面版本（我不想要）。但是，当我在Google Developer'Dimensions'扩展程序中查看该网站时，该扩展程序允许您模仿移动设备（在本例中为iPhone 5），css链接可按预期工作。

有人能告诉我我的css链接有什么问题导致它们无法在iPhone 5上运行吗？谢谢

css/tablet/header.css

Answer 1

尝试：<meta name="viewport" content="width=device-width, initial-scale=1.0" />。有关详细信息，请参阅MDN上的这篇文章： https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

在构建自适应网站时，尝试使用一些可靠的设备特定媒体查询。在您的情况下，媒体查询不适合iPhone。

例如，您可以使用这些作为起点，然后如果需要，您可以在线搜索其他资源。

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

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

您可以在此处找到包含特定设备的更详尽的列表：http://nmsdvid.com/snippets/

CSS链接不适用于响应式设计

2 个答案: