0

我正在尝试设计一个可以从平板电脑、智能手机和台式机轻松访问的网站，并且可以在任何设备上同样使用。

经过一番阅读，我发现 iPhone 4 分辨率的数字参差不齐，即 620px - 760px。

我知道使用以下 CSS 来检测media. 但是，以下 CSS 不适用于我的 iPhone 4。

//detect smart phone 
@media screen and (min-width:1px) and (max-width:780px) {
    .inner-main-header{border:2px solid brown;}

}

任何想法为什么会这样？有什么建议在这种情况下我能做什么？我的目标是简单地将一种特定的 CSS 用于平板电脑，将另一种用于智能手机。

我很感激任何建议。

提前谢谢了！

4

2 回答 2

1

我相信它是最小设备宽度和最大设备宽度。此外，您的像素看起来有点偏离：

//detect smart phone 
@media screen and (max-device-width:640px) {
    .inner-main-header{border:2px solid brown;}

}

//detect tablets
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    .inner-main-header{border:2px solid black;} //changed to black just to see difference
}
于 2013-06-15T00:39:20.887 回答
0

老实说，我会使用这样的网站将用户重定向到具有各自 CSS 的适当子域。如果您选择不这样做，我建议您仅使用 css 根据屏幕尺寸使用诸如 max-width: 100% 和 width:auto\9 之类的值来缩放所有媒体。另一个很好的教程是这个 youtube 视频祝你好运！

于 2013-06-15T00:05:57.643 回答