CSS медиа-запрос не обнаруживает изменения ширины области просмотра - PullRequest
Новая
       9

CSS медиа-запрос не обнаруживает изменения ширины области просмотра

0 голосов
/ 10 мая 2018

У меня простой вопрос.У меня есть простой CSS с медиазапросами: 

@media only screen and (max-width: 700px) {
    //some CSS A
}

@media only screen and (min-width: 700px) {
    //some CSS B
}

и этот метатег в основном html 

<meta name="viewport" content="width=device-width,initial-scale=1">

мой DOOGEE X5PRO имеет разрешение 1280x720 (по данным интернета), поэтому я быожидать, что B CSS будет применяться при просмотре на телефоне.Но это не так.Почему это?Я пытался очистить данные и т. Д.

Вы можете проверить сами: velkahra.skauting.cz

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Так что, по-видимому, я проверил разрешение экрана с помощью javascript и обнаружил, что разрешение намного меньше. Никогда не доверяй интернету.

Проблема где-то в том, что у моего телефона есть 2 устройства-пикселя для CSS-пикселя. Узнайте больше об этом здесь: Что такое соотношение пикселей устройства?

Я использовал это: 

<script type="text/javascript"> 
    window.addEventListener("DOMContentLoaded", function(event) {
        window.alert($(window).width());
    });

</script>

В коде нет ошибки, кроме точки останова в 700px

Может быть, это поможет некоторым новичкам.

0 голосов
/ 10 мая 2018

Ваш CSS выглядит так, как будто у него нет проблем. Вы можете попробовать открыть консоль в своем браузере и посмотреть, как ваш код ведет себя в разных точках разрыва.

...