2

I am having an issue with CSS media queries not working correctly on the "border-line" cases. Here is some sample code that was listed in another thread (CSS Media Queries not working in Firefox and Chrome) which demonstrates the problem. Internet Explorer and Edge both work correctly with this sample code.

At a screen width of 641px, the sample page displays:
Firefox: "Profile" Chrome: "Tablet Profile"

At a screen width of 991px, the sample page displays:
Firefox: "Profile" Chrome: "Profile"

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
  @media (min-width: 0) and (max-width: 640px) {
      h1::before {content: 'Phone ';}
  }
  @media (min-width: 641px) and (max-width: 991px) {
      h1::before {content: 'Tablet ';}
  }
  @media (min-width: 992px) {
      h1::before {content: 'Desktop ';}
  }
</style>
</head>

<body>
  <h1>Profile</h1>
</body>
</html>

enter image description here



****Update****:

After further testing, the problem seems to be coming from the "Scale and Layout" setting under the Windows Display Settings. Windows has 125% as the recommended scaling value, and so that's what I had it set to. When I change this setting back to 100%, then the problem goes away.

For the benefit of anyone else having this issue, I finally found this issue documented: https://github.com/twbs/bootstrap/issues/19197

user2212659
  • 51
  • 6
  • It's working properly in both browser in my mac... – Minal Chauhan Jun 02 '17 at 04:49
  • Hmmm... that's interesting. I am on a Windows machine. I wonder if that is somehow affecting it. – user2212659 Jun 02 '17 at 04:51
  • Well it works fine.. try Clearing Cache – parish Jun 02 '17 at 04:57
  • I just tried clearing the cache, and am still experiencing the issue. I've now tried it on two other machines (one with Win 10 and one with Win 7), and am not having the problem on the other machines. So, it seems that, for whatever reason, I am only experiencing the problem on my Asus laptop (with Win 10). – user2212659 Jun 02 '17 at 05:24
  • I'm using the same device and OS as yours and your code is working fine for me. – Abhishek Pandey Jun 02 '17 at 05:31
  • To prevent situations like this, it's best to not use min-width and max-width in the same query. Design your css "desktop-first" (write general CSS for the widest screen on top, then adjust for narrow screens in progressively decreasing max-width media queries), or "mobile-first" (write CSS for the narrowest screen, then adjust for wider screens in progressively increasing min-width media queries). The latter is preferred. – Mr Lister Jun 02 '17 at 08:42
  • Similar problem here: https://stackoverflow.com/questions/41449476/media-queries-running-weird-because-of-non-integer-width without any answer though. If you can type up an answer to this one, we can close the other one as a duplicate. – Mr Lister Jun 02 '17 at 08:47

0 Answers0