Ran into an interesting problem last week, and wanted to share it here while it was still fresh in my mind.
I’d received a support ticket from a client who was seeing the mobile version of our website, even though she was viewing it on a desktop with Google Chrome’s zoom level set at 100%. If she decreased Chrome’s zoom level to 90%, the website would suddenly transition into the desktop version.
It turns out there were two factors contributing to this issue:
- Her older monitor supported a maximum screen width of 1280 pixels.
- Her Windows Display settings had a “Change the size of text, apps, and other items” feature set to 125%.
Since the 125% setting effectively removes 25% of the total screen width (1280 – 320 = 960 pixels), Google Chrome fell beneath the 1024 pixel width for the desktop media query, and was displaying the tablet/mobile version. Â Changing Chrome’s zoom level down to 90% was an effective increase of 10% screen width, increasing the effective screen width to 1056 pixels– which caused the CSS media query for desktops to suddenly come into effect.
With the higher resolutions on newer monitors and/or laptops, you’re less likely to encounter this issue because it would take a greater percentage to drop a higher resolution below the 1024 pixel threshold.
Hope this helps someone else solve this issue, if they encounter it.