Jump to content
  • 0

@media запросы


USF
 Share

Question

Возникла проблема следующего плана:

с помощью media делаю адаптивный макет. собственно, чаще всего вижу использование max-width или min-width, но!

media only screen and (max-width: 480px) отказывается работать на устройстве с разрешением 480:854(андроид - хром) (max-width: 854px тоже не воркает). Работает max-device-width.

Собственно вопрос, почему? разницу между этими 2мя вещами я понимаю, но ведь в моем случае разрешение и размер области совпадают...или я ошибаюсь?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Возникла проблема следующего плана:

с помощью media делаю адаптивный макет. собственно, чаще всего вижу использование max-width или min-width, но!

media only screen and (max-width: 480px) отказывается работать на устройстве с разрешением 480:854(андроид - хром) (max-width: 854px тоже не воркает). Работает max-device-width.

Собственно вопрос, почему? разницу между этими 2мя вещами я понимаю, но ведь в моем случае разрешение и размер области совпадают...или я ошибаюсь?

Сталкивался. Помогло такое:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Без этой строчки девайс пытался отобразить сайт "в полный размер" со всеми вытекающими. На айфонах присутствовало багло, из-за которого при изменении ориентации не пересчитывалась ширина, на просторах инета можно наткнуться на JS фикс.

Edited by hedgehog
  • Like 2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy