How to let this media query works the same in different browsers on Samsung Galaxy Note4?

Question

I have a HTML code as:

<!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>

It works fine on all iOS devices but behaves weird for some Android devices like Samsung Galaxy Note 4 as I can reproduce the issue.

For the default browser, it works fine. The alert result is 980px and 280px but for some browsers like UC browser, it's 510px.

Is there anything wrong with my media query code?

Thanks for any kind of tips!

score 0 · Answer 1 · edited May 23 '17 at 12:29

You should take a look at how "Twitter Bootstrap" outlines their media query structure at http://getbootstrap.com/css/#grid-media-queries

Try comparing those with your own written media query structure, and if you are still stuck, you should check out Chris' written media query set at https://stackoverflow.com/a/21437955/4069464

Hope this helps!

Note: If after you have setup all the proper media query sets, and somehow this is still not working for the UC browser, then you probably have to read out in detail on how UC browser defines their mobile screen size (possibly they might have defined themselves a different set of definition of screen sizes)

it works with `max-width` query but not `max-device-width` query. thanks! — AGamePlayer, Jul 13 '15 at 02:06

How to let this media query works the same in different browsers on Samsung Galaxy Note4?

1 Answers1