Jump to content
  • 0

Media queris и смартфоны с высоким разрешением


AlexBes
 Share

Question

Доброго времени суток. Есть у меня задача для одного сайта сделать полу-адаптивную верстку для смартфонов и планшетов. "Полу", потому что внешний вид контента будет кардинально меняться, вплоть до изменений html.

Алгоритм примерно такой:
от 320 до 767 - контент под мобильные
от 768 до 1023 - под планшеты
от 1023 и выше - десктоп

Но проблема в том, что на некоторых смартфонах встречается ширина 800px при разрешении 4,3". То есть такому телефону будет отдаваться контент предназначенный для планшетов.

 

Можно ли как-то решить эту проблему?

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Можно ли как-то решить эту проблему?
 800 это еще не предел. С многочисленными китайскими аппаратами, разрешение может быть не предсказуемым.

 

Делайте и адаптивный и резиновый. Или на 1023 показывайте сайт в размере 768. 

Для 767 сайт в размере 320, хотя на таком разрешении проще делать резиновый, т.е. с 100%.

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

 

Проблем скорее всего не избежать все равно, т.к. придется дополнять css, не стандартными media@ Это вполне нормально.

 

Я вот такое еще для себя, вчера выписал, на попробовать.

DESKTOP: max 1920px, min 1018px;
LAPTOP: max 1017px, min 769px;
TABLET: max 768px, min 481px;
MOBILE: max 480px, min 361px;
SMALL_MOBILE: max 360px, min 280px.
 
то же самое, что у вас, в принципе. 
Link to comment
Share on other sites

  • 0

Похоже, что я все таки ошиблась.

Тестировала на LG L90, у которого разрешение 960x540 - показывается мобильная версия сайта, хотя в медиа запросах для мобильных указано до 767px.

Еще один интересный момент: возьмем, например, Samsung Galaxy s4, у него разрешение 960x540, а в эмуляторе хрома написано: viewport 360x640.

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