Разрешения экрана для адаптивной верстки
А это ведь очень интересная тема! И от заказчиков я часто слышу полностью противоположные мнения. Кому-то хочется захватить только мобильные телефоны, кому-то важен только Айфон, а некоторым хочется видеть на Айпаде только полную версию и не переходить на мобильную (адаптивную) версию сайта.
Ниже я привел список разрешений для работы в Бутстрапе (который я не использую, кстати):
В принципе, каждый мой заказчик адаптивного дизайна - прав, как это ни странно. Только у него есть все данные по устройствам и их использованию на сайте. Да и в работу я беру уже готовые сайты, создатели шаблонов которых часто не думали про мобильные устройства. И что отлично смотрится на планшетах, может не так хорошо работать на широком Айпаде, даже если приложить всё старание.
Важный момент!
Разрешение (размер) экрана устройства (количество пикселей) никак не связано с размерами отображаемого на устройстве сайта.
Допустим, разрешение iPhone 4 - 960 x 640 пикселей.
А сайты он показывает на 320 x 480.
Связано это с тем, что у производителя пиксели могут быть, грубо говоря, любые. Большие, маленькие, круглые, квадратные... да какие угодно (привет Ретине, где их просто в 2 раза больше и они мелкие). И все это разнообразие аппаратных пикселей и прочих зоопарков потом приводится к размерам стандартных пикселей CSS. Да еще производитель сам устанавливает область просмотра для устройства. Например, 800 на 600.
Вот и получается, что нельзя просто взять и посмотреть размеры экранов всех производителей. Так как есть 100% шанс, что на планшете 1600 x 1200 сайт будет показан 800 на 600.
Так какие размеры экрана выбрать для адаптивной верстки?
Правильно? Никакие! 
Но это подойдет для «резиновых» тянущихся сайтов, которых очень мало. Уменьшаем экран и смотрим за поведением блоков. Если нужно - добавляем стили.
Есть еще изначальный метод разработки «Mobile first» - когда верстают страницу для мобильных, а потом увеличивают и добавляют стили. Но для готовых сайтов он не очень подходит, так как у нас уже есть полная версия, от которой и зависит положение блоков в коде.
Раньше я начинал разработку стилей, прописывая в медиа запросах 700px. Позже исправил на 775, чтобы захватывать с запасом вертикальную ориентацию Айпада (она 768) а горизонтально показывать полную версию сайта, так как не все посетители любят «мобильный» вид на планшетах.
Недавно я встретил такую табличку, которую чуть округлил и соединил со своим обычным шаблоном для начала адаптации:
/*** D.iK.iJ - /wm
/adaptaciya-saytov.php ***/ /*** Standart ***/
@media screen and (max-width: 960px) {
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}
/*** iPhone (portrait) ***/
@media screen and (max-width: 775px) {
}
/*** iPhone (landscape) ***/
@media screen and (max-width: 500px) {
td, th {word-wrap: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}
320px я бы добавил, так как это разрешение для Айфона 4, по которому раньше Гугл проверял адаптивность сайта. Сейчас, кажется, перешел на 340 или 360. Но я все равно всегда стараюсь захватить даже 270 пикселей - это минимальная ширина окна в Хроме. Да и устройства с маленьким экраном все еще есть.
А вот над верхним порогом я все еще думаю. Скорее всего перейду на 960, чтобы захватить некоторые планшеты и все еще не трогать горизонтальное положение экрана в Айпадах.
