gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:33:18 24 4
gpt4 key购买 nike

我有一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com