1

I'm building a landing page and have the following code in my head section

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1">
    <link rel="stylesheet" href="css/normalize.min.css">
    <!--<link rel="stylesheet" href="css/style.css">-->
    <link rel="stylesheet" href="css/mobile.css?v=1.2"  media="(max-width: 1000px)"  />
    <link rel="stylesheet" href="css/desktop.css?v=1.2" media="(min-width: 1001px)" />

The media queries work perfectly on IE, Edge, and Chrome switching between layouts and loading different files, but when viewing the page in Firefox the page won't switch when zooming unless the user refreshes the page.

I would appreciate any input on how to resolve this, thank you!

clemens
  • 16,716
  • 11
  • 50
  • 65
user8607802
  • 11
  • 1
  • so it only doesn't work when someone zooms on your website? I dont see a reason for having a working media query stylesheet for zoom. – Tim Gerhard Nov 01 '17 at 08:52
  • I disable zooming, but found this https://stackoverflow.com/questions/22223866/media-queries-for-different-zoom-levels-of-browser – Gezzasa Nov 01 '17 at 08:56
  • Are your desktop and mobile styles that massively different to begin with, that using two separate stylesheets (which browsers will load both anyway, to avoid a delay when the user switching viewport sizes or orientation requires the “other” to apply) would be justified? If not, you’d probably be better off with one stylesheet, and using media queries inside that, in the first place. – CBroe Nov 01 '17 at 09:02
  • working with an accessibility consultant I'm required to allow pages to zoom up to 200% without vertical scrolling [at 200% the page should switch layouts] so disabling zooming is not an option, the layouts are different as you can see in the following example http://digital.spring-valley.co.il/2017/meir/volvo_recency/ – user8607802 Nov 01 '17 at 09:10
  • @TimGerhard since browser zoom changes the screen "size" we use one stylesheet to handle all desktop/latop screen sizes [and user zoom up to 175%] and the other for mobile devices [and 200% user zoom] – user8607802 Nov 01 '17 at 09:18

1 Answers1

0

The zoom in Firefox messes with the responsive design mode measurements. Apparently, the dimensions shown in responsive design mode aren't the virtual dimensions of the website but are instead the screen dimensions, so they don't change when Firefox is zoomed in or out. developer.mozilla

Mehraj Khan
  • 927
  • 6
  • 17