Проблема с пользовательским масштабированием в настольных браузерах: весь CSS исчезает при уменьшении до 33% и менее - PullRequest
0 голосов
/ 28 октября 2019

Не знаю, почему я сталкиваюсь с этой проблемой с масштабируемым пользователем (масштабированием), когда все мои стили полностью исчезли на 33% и меньше в Chrome (IE11 хуже: 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>

1 Ответ

0 голосов
/ 29 октября 2019

Проблема связана с медиа-запросом в вашем css <link>. Если мы удалим media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" в <link>, проблема исчезнет.

Когда мы масштабируем браузеры, они ведут себя как разные устройства, max-width изменится. В моем тесте, когда мы уменьшаем масштаб, ширина области просмотра становится больше, чем 1920px, поэтому таблицы стилей не будут применяться в соответствии с медиа-запросом.

Для получения дополнительной информации вы можете обратиться к этой теме .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...