Учитывая большое количество разрешений, идеальным решением данных проблемы была бы реализация проекта «One Web». One Web означает создание, насколько это возможно, одинаковых условий для использования и отображения информации на всех устройствах. Но это не означает, что одна и та же информация будет выглядеть абсолютно одинаково на разных устройствах.
Разрешения экранов мобильных устройств
- 320×480 — iPhone, iPod
- 480×800 — Android: HTC Desire, Nexus One, i9000 Galaxy S, и другие
- 768×1024 — iPad
- 640×960 — iPhone 4
- 1000×бесконечность — планшеты и десктоп
Определить ширину экрана, положение и соотношение сторон можно с помощью media-запросов, которые появились в CSS3.
/* Устройства с экранами от 320px до 480px */
@media (min-width:320px) and (max-width:479px) {
.grid {width:100%;}
}
/* Устройства с шириной экрана 480px и выше */ @media (min-width:480px) and (max-width:639px) { .grid {width: 50%;} }
/* Устройства с шириной экрана 640px и выше */ @media (min-width:640px) and (max-width:959px) { .grid {width: 33.33%;} }
/* Устройства с шириной экрана 960px и выше */ @media screen and (min-width:960px) and (max-width:1199px) { .grid {width: 25%;} }
/* Устройства с шириной экрана 1200px и выше */ @media (min-width: 1200px) { .grid {width: 20%;} }