我有一个 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test page</title>
<style>
.hint {width:510px;}
@media only screen and (max-device-width: 720px) {
.hint {width:280px}
}
@media only screen and (max-device-width: 720px) and (orientation: landscape){
.hint {width:350px}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="hint">just a test
<script>alert($(window).width()); alert($('.hint').css('width'));</script>
</div>
</body>
</html>
它在所有 iOS 设备上运行良好，但在某些 Android 设备(如 Samsung Galaxy Note 4)上表现怪异，因为我可以重现该问题。
对于默认浏览器，它工作正常。 alert 结果是 980px 和 280px 但对于某些浏览器如 UC 浏览器，它是 510px。
我的媒体查询代码有什么问题吗？
感谢任何类型的提示!
最佳答案
您应该在 http://getbootstrap.com/css/#grid-media-queries 查看“Twitter Bootstrap”如何概述其媒体查询结构。
尝试将它们与您自己编写的媒体查询结构进行比较，如果您仍然卡住，您应该查看 Chris 在 https://stackoverflow.com/a/21437955/4069464 上编写的媒体查询集。
希望这对您有所帮助!
注意:如果在您设置了所有正确的媒体查询集之后，不知何故这仍然不适用于 UC 浏览器，那么您可能需要详细阅读 UC 浏览器如何定义其移动屏幕尺寸(可能他们可能为自己定义了一组不同的屏幕尺寸定义)
关于android - 如何让这个媒体查询在三星 Galaxy Note4 的不同浏览器中工作相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31374211/