Question

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

经过一番阅读后，我发现iPhone 4分辨率的混合数字为620px - 760px。

我知道使用以下CSS来检测media的类型。但是，我的iPhone 4上未应用以下CSS。

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

}

为什么会这样？在这种情况下我能做些什么？我的目标是简单地使用一个特定的CSS用于平板电脑，另一个用于智能手机。

我感谢任何建议。

非常感谢提前！

Answer 1

我相信它是min-device-width和max-device-width。此外，您的像素看起来有点偏差：

//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
}

Answer 2

老实说，我会使用像this这样的网站将用户重定向到具有各自css的相应子域。如果您选择不做这样的事情，我建议使用css根据屏幕大小使用max-width：100％和width：auto \ 9等值来缩放所有媒体。另一个好的教程是this youtube video祝你好运！

各种屏幕分辨率的样式（智能手机，平板电脑，笔记本电脑等）

2 个答案: