Недавно я начал заниматься мобильным веб-дизайном и провел здесь базовый тест:
Он отлично работает в настольном браузере, однако я немного запутался в том, как справляться с малейшим дизайном ширины при загрузке на устройство с высоким разрешением, например, на сетчатые дисплеи на iPhone. Из-за этого типа отображения это означает, например, размер 16 пикселей, который нормально читать на рабочем столе, невозможно прочитать на iPhone 4/5.
Как обычно это делается?
Хорошо, если вы хотите сделать текст меньшим на мобильном телефоне или больше, вы бы сделали
@media screen and (max-width: 480px) {
font-size: 10px; /* Smaller */
}
или
@media screen and (max-width: 480px) {
font-size: 20px; /*Larger*/
}
И убедитесь, что у вас есть это в тэге <HEAD>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Или вы также можете отключить масштабирование следующим образом:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
И для поддержки IE10 попробуйте:
@-ms-viewport{
width:device-width
}
Вы можете выбрать размер шрифта в соответствии с шириной экрана:
/* Large desktop */
@media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
@media (max-width: 480px) {
font-size: 12px;
}
Чтобы убедиться, что ваш макет растянут на экране мобильного устройства, вы должны использовать метатег viewport:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Этот метатег должен находиться внутри основного тега. "Ширина устройства" будет максимальным пикселом, который может отобразить ваш экран. Вы также можете установить там постоянное значение (600 пикселей).
Начальная шкала = 1 означает, что она будет автоматически увеличена до 100%. (0,5 = > 50%)