我正在尝试为智能手机定义CSS，而CSS中的其他所有内容都可以保持不变。
CSS：
.content { background: orange; padding: 30px; }
#mobile { display:none; }
@media screen and (max-device-width: 480px){
#mobile { display: block; }
#desktop { display: none; }
}
HTML：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="mobile">this is mobile</div>
<div id="desktop">this is desktop</div>
</body>
</html>
现场演示：http://jsfiddle.net/L5zDQ/
如果使用上面的演示使浏览器窗口缩小，则“此为移动设备”将永远不会显示。我想念什么？
最佳答案
不应使用max-device-width，而应使用max-width，这取决于浏览器当前状态的大小：
@media screen and (max-width: 480px) {
...
}
关于css - 为什么我不能针对智能手机而不是具有响应设计的智能手机，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14569941/