Responsive Layout
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Данная инструкция в head страницы явно указывает на то, что макет адаптивный. Но этот мета-тег имеет смысл только в сочетании с медиа-запросами. Если вы не планируете сознательно адаптировать верстку под мобильные устройства или пока не очень хорошо понимаете принципы адаптивной верстки, не добавляет этот тег на страницу. В противном случае эта инструкция приведет к смерти маленького енота или слоненка.
Не страшно, если ваш сайт не адаптирован под мобильные устройства -- он просто впишется в реальную ширину экрана.
Конечно, приятно, когда сайт адаптирован для отображения на мобильных устройствах (дорого/богато, модно/современно).
Пользователи обычно в курсе, что они пытаются взаимодействовать с сайтом с мобильного устройства, и они чаще всего знают, как вручную увеличить область экрана в случае необходимости.
Гораздо хуже, когда viewport мета-тег используется "прост потому что в index.html так было" или "а у нас главная адаптивная, на остальное денег не хватило". Лучше уж добавляйте его скриптом на страницах, где он реально нужен.
В противном случае пользователь увидит только кусочек сайта, размер которого зависит от реальных размеров макета: чем он шире, тем менее информативным будет этот кусочек.
Еще страшнее, когда вы принудительно запрещаете масштабирование макета или легкомысленно прописываете overflow:hidden в попытке избавиться от горизонтального (и/или вертикального) скролла.
Ну а чтобы Черный Тестер не пришел за вами ночью, по по ссылке доступная для понимания статья на тему допустимых и уместных (или не очень) инструкций масштабирования.
Ну, и немношк ссылочек, потому что до меня все уже сказано:
Стоит помнить о том, что для мобильных устройств не стоит мельчить с размерами элементов (не только картинок, но и ссылок тоже). С десктопом и планшетами понятно, но стоит помнить о том, что разрешение экрана и его размер -- разные вещи. Нет ничего утомительнее, чем тыкать дважды по ссылкам, набранным 11м кеглем. Ну, и чтобы лишний раз не доставать калькулятор, ниже приведены наиболее часто используемые размеры иконок (элементов).
- 1024x1024
- 512x512
- 256x256
- 128x128
- 64x64
- 32x32
- 16x16
Собственно, вот почему удобнее использовать в модульной сетке микромодуль в 8px.
- Mobile first/НЕ mobile first и опасность смешанного подхода в адаптивной верстке.
- Разница между responsive, adaptive и их отсутствие.
- Как впихнуть невпихуемое или как адаптировать уже сверстанный макет под мобильные устройства.
- Retina - кретина.
- Чеклист адаптивной верстки.