我不确定这是否只发生在 galaxy S4 上，但我正在用它来测试它。
我将代码精简到最低限度。
更改颜色只是为了测试代码。常规 css 有效，移动版本不会被触发。
谢谢，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<style type="text/css">
@media only screen and (max-device-width : 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
</style>
</head>
<body>
<div id="aaa">test</div>
</body>
</html>
最佳答案
它不起作用，因为您在实际 CSS 之前添加了媒体查询。此外，您可以简单地使用 @media (max-width: 480px) { //styles here for devices whose screen size is less than 480px }而不是 @media only screen and (max-device-width: 480px) { //styles here }这应该可以完美地工作:
<style type="text/css">
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
@media (max-width: 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
</style>
这是一个有效的 demo 。您可以尝试减小结果窗口的宽度，并在窗口大小减小到超过 480 像素时查看文本样式的变化。
关于html - @media only screen css 不适用于 galaxy s4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26639319/