0

Unsure why I'm running into this issue with user-scalable (zoom) where all of my styling is completely gone @ 33% and less on Chrome (IE11 worse : 75%).

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=yes">
<link href="css/zoom.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="css/fm_styles.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="css/ninja-slider.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="images/fmstacked.ico" rel="shortcut icon" type="image/x-icon">
<script src="js/ninja-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/w3-include-html.js"></script>

Eras
  • 3
  • 2

1 Answers1

0

The issue is related with the media query in your css <link>. If we remove the media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" in the <link>, then the issue will disappear.

When we zoom browsers, they behave as different devices, the max-width will change. In my test, when we zoom out, the viewport width will become larger than 1920px so the stylesheets will not being applied according to the media query.

For more information ,you could refer to this thread.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • Unfortunately it didn't work. Still having the zooming issues. It scales nicely when you manually shrink the desktop browser window. But it's the keyboard zooming (ctrl+ & ctrl-) that loses the css completely. When I check 'Inspect' from Chrome, the user agent goes to 'display: none;'. I've tried to override this within my css to no avail. – Eras Oct 30 '19 at 18:15
  • I tried with my own stylesheet and the results of manually shrink and keyboard zooming is the same. Besides, you could refer to [this thread](https://stackoverflow.com/questions/38079184/how-to-override-the-user-agent-styling) and [this thread](https://stackoverflow.com/questions/7466404/chrome-user-agent-stylesheet-overwriting-my-site-style) about how to override user agent stylesheet. Usually if you don't define the style of an element then the user agent style will be used. – Yu Zhou Oct 31 '19 at 02:16