Есть ли стиль «@media», который влияет на область просмотра?

У меня есть веб-сайт, где экран выходит выше 1400 пикселей; сайт больше не расширяется. Однако у меня также есть плавающий элемент. навигационная панель перемещается влево и масштабируется по размеру со страницей. Тем не менее, я не пытаюсь создать стиль, если размер экрана увеличивается.Есть ли стиль «@media», который влияет на область просмотра?

Если кто-то просматривает мою страницу выше разрешения экрана 1400px, она работает и не перемещается. Однако, если кто-то просматривает веб-сайт и уменьшает масштаб увеличения размера видового экрана, а не размера экрана, он остается на левой стороне и искажается.

Я хочу, чтобы div отображался: нет, если размер экрана или размер области просмотра достигает максимального размера 1400 пикселей;

Мне нужна совместимость для современных браузеров и мобильных устройств.

источник

2013-03-04 gcoulby

'@media all и (max-width: 1400px) {' не работает? –

@ Explosion Pills: По-видимому, это не так: раньше у меня это происходило при масштабировании страницы, но я понятия не имею, если это по дизайну - даже если утверждают, что 'width' и' height' применяются к окну просмотра. – BoltClock

@BoltClock Я думаю, что это ошибка Webkit; якобы это исправлено с помощью 'em' вместо' px' (я читал это), но это не сработало для меня, когда я попробовал. –

вы можете попробовать это ...

@media screen and (max-width: 1400px){ 
     div { 
      display:none; 
    } 
    }

источник

2013-03-04 04:38:26 jhunlio

Это то, что у меня есть, если разрешение экрана приводит к тому, что размер ** окна ** составляет + 1400 пикселей, это отображает div как none. Однако, если экран любого размера и вы уменьшаете масштаб, сделав ** viewport ** размером больше + 1400px major fail! – gcoulby

@media (min-width: 1400px) { 
    body { 
     background:red !important; 
    } 
}

работает для меня :)

EDIT: жаль пропустил часть о масштабировании страницы. Я не уверен, что видовое окно должно работать так?

источник

2013-03-04 04:43:38 zenkaty

Что с этим '! Important'? – BoltClock

Это был всего лишь тестовый код, который я использовал, чтобы убедиться, что он был быстро доступен для просмотра. Я пропустил часть масштабирования, хотя, извините. он не работает с увеличением. – zenkaty

по общему признанию, если что-то не работает! Важным является первое, что я пробую. Видовые экраны не подходят для работы. ive читайте, что есть @viewport, но у него нет поддержки браузера, в основном для мобильных телефонов. который протестирован и не работает. похоже, что проблема может быть лучше подходит для javascript – gcoulby

Есть ли стиль «@media», который влияет на область просмотра?

ответ

Смежные вопросы