Недавно я начал экспериментировать с адаптивным веб-дизайном и провел базовый тест здесь:
Он отлично работает в настольном браузере, однако я немного запутался в том, как работать с дизайном наименьшей ширины при загрузке на устройстве с высоким разрешением, например, на дисплеях Retina на iPhone. Из-за этого типа дисплея это означает, например, что размер 16px, который является нормальным для чтения на рабочем столе, невозможно прочитать на iPhone 4/5.
Как это обычно решается?
em) для настройки размера шрифта больших/меньших элементов? 18.04.2013 ems, а не на фиксированных pxs. Последний будет отображать текст очень маленьким на экранах с высокой плотностью пикселей, потому что в этом мире пиксели — это особенно крошечные вещи. 26.11.2014 Ну, если вы хотите сделать текст меньше на мобильном телефоне или больше, вы бы сделали
@media screen and (max-width: 480px) {
font-size: 10px; /* Smaller */
}
or
@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;
}
Чтобы убедиться, что ваш макет растягивается на экране мобильного устройства, вы должны использовать метатег области просмотра:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Этот метатег должен находиться внутри тега head. «Ширина устройства» будет максимальным количеством пикселей, которое может отображать ваш экран. Там же можно установить постоянное значение (600px).
Initial-scale=1 означает, что масштаб будет автоматически увеличен до 100%. (0,5 => 50%)
maximum-scale=1). 18.04.2013@viewport: dev.opera.com/articles/view/ 18.04.2013