如何让这个媒体查询在三星 Galaxy Note4 上的不同浏览器中工作相同？

Posted 2023-03-06

技术标签:

【中文标题】如何让这个媒体查询在三星 Galaxy Note4 上的不同浏览器中工作相同？【英文标题】：How to let this media query works the same in different browsers on Samsung Galaxy Note4? 【发布时间】：2015-10-01 04:14:44 【问题描述】：

我有一个 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 设备上都能正常工作，但在三星 Galaxy Note 4 等一些 android 设备上表现很奇怪，因为我可以重现该问题。

对于默认浏览器，它工作正常。警报结果是 980px 和 280px，但对于某些浏览器，如 UC 浏览器，它是 510px。

我的媒体查询代码有什么问题吗？

感谢您的任何提示！

【问题讨论】：

【参考方案1】：

您应该在http://getbootstrap.com/css/#grid-media-queries查看“Twitter Bootstrap”如何概述他们的媒体查询结构

尝试将它们与您自己的书面媒体查询结构进行比较，如果您仍然卡住，您应该查看 Chris 的书面媒体查询集https://***.com/a/21437955/4069464

希望这会有所帮助！

注意：如果在您设置了所有正确的媒体查询集之后，不知何故这仍然不适用于 UC 浏览器，那么您可能需要详细阅读 UC 浏览器如何定义其移动屏幕尺寸（可能他们为自己定义了一套不同的屏幕尺寸定义）

【讨论】：

它适用于max-width 查询，但不适用于max-device-width 查询。谢谢！