Какие всё-таки минимальные размеры использовать при адаптивной вёрстке?
Слышал, что минимальной шириной экрана принято считать 320px, якобы это ширина iphone 4
И я так всегда и делал, в chrome, когда выбираешь iphone 5 (четверки нету), выглядит все шикарно.
Но, тут как-то в руках оказался iphone 5s и решил я глянуть как будет выглядеть в нем недавно созданный сайт и каково же было мое удивление, что сайт оказался с поломанной вёрсткой. На глаз я определил, что ширина там около 250px, если сравнивать с браузером на компьютере, когда сжимаешь до такой ширины.
Что за бред. Ширина viewport у iPhone 4, 4S, 5, 5S и SE — ровно 320 px. Меньше размера viewport у телефон нет в природе. Даже у очень старых.
Поломанная вёрстка у вас из-за, собственно, косой вёрстки. Тестировать в Chrome верстку под Safari нельзя. Это другой движок. На всякий случай скажу, что Chrome на iOS — это тоже Safari, как и любой другой браузер на iOS. Такова политика Apple.
Если у вас MacOS, то тестируйте верстку в XCode в официальном эмуляторе, либо напрямую в десктопом Safari. Если Windows — покупайте подписку на тот же https://www.browserstack.com/.
P. S. Профиль для iPhone 4 можно выбрать в Chrome, нужно нажать «add device» или как-то так.
Вы конечно можете делать и под 140px, право, как автора макета, за вами, но я бы сделал так:
1. Зашел на сайт: https://ru.screenresolution.org/
2. Посмотрел бы самое распространенное разрешение экрана
3. Посмотрел бы минимальное распространенное (которое используют 1%+ пользователей)
4. И делал бы макет с упором на них.
Средний
