Реалистичные разрешения мобильного экрана

Существует ли матрица где-нибудь, чтобы получить реалистичную доступность экрана для наиболее распространенных телефонов, которые учитывают разрешение экрана с видимыми панелями инструментов?

Нам нужно разработать прокручивающийся сайт для мобильных/планшетов, и хотя мы стараемся сделать css максимально возможной, краткий опирается на фоновые изображения, что означает, что нам нужны разнообразные медиа-запросы для переключения изображений на лучший опыт - реальное руководство по разрешению было бы действительно полезно.

Приветствия

Ответ 1

В Google Chrome откройте инструменты разработчика, нажав F12, и нажмите значок шестеренки, чтобы перейти в Настройки → Переопределения, включить "Пользовательский агент" и выбрать нужное устройство - с помощью "Матрицы устройств" вы можете настроить экран размер и многое другое.

Ответ 2

Проверьте http://screensiz.es/phone. Вы можете заказать телефоны или планшеты по размеру экрана, соотношению сторон и популярности.

Также посмотрите скринкаст в Chrome Canary Dev Tools. http://www.html5rocks.com/en/tutorials/developertools/mobile/

То, что я все еще ищу, это что-то вроде размера браузера Google, но для мобильного экрана.

Обновить:

Размер браузера Google Labs теперь является частью Google Analytics

Проверьте также https://design.google.com/devices/ (AKA теперь как https://material.io/tools/devices/) для получения последних данных

Ответ 3

@media (min-width: 1200px) {

@media (max-width: 980px) {

@media (max-width: 979px) {

@media (min-width: 980px) {

@media (min-width: 768px) и (max-width: 979px) {

@media (max-width: 768px) {

@media (max-width: 767px) {

@media (max-width: 480px) {

Должны быть стандарты

Ответ 4

Я думаю, вам обязательно нужно попробовать этот сайт: http://responsivetools.com/

Это даст вам краткое представление о том, как выглядит ваш сайт для разных мобильных и планшетов.

Ответ 5

Существует множество онлайн-сервисов, в которых вы можете просматривать на вашем сайте "через" дисплей телефона с указанными разрешениями.

Например: mobilephoneemulator

Ответ 6

Statcounter, вероятно, обеспечивает наилучшее количество хрустов на размерах экрана и многих других статистических данных. Их страница всегда дает мне проблемы с загрузкой, поэтому я предпочитаю найти кого-то, кто цитировал их статистику, а не сразу перейти к источнику, как этот блоггер:

http://www.satya-weblog.com/2013/07/desktop-laptop-mobile-screen-resolution-most-common-worldwide.html

Надеюсь, что это более прямой ответ на ваш вопрос!

Ответ 7

Мы, возможно, захотим попробовать здесь: http://cartoonized.net/cellphone-screen-resolution.php, он в основном дает вам лучшее разрешение в зависимости от типа телефонов.

Ответ 8

Это список для всех известных свойств CSS @media для мобильных устройств + несколько разрешений для рабочего стола, которые можно использовать.

К ним относятся Android, iPhone, iPad, Google Nexus, LG, Samsung, Nokia, HTC, Motorola, Sony и все известные бренды.

Посмотрите GitHub

@media all and (max-width: 2560px){

}
@media all and (max-width: 1920px){

}
@media all and (max-width: 1440px){

}
@media all and (max-width: 1280px){

}
@media all and (max-width: 1200px){

}
@media all and (max-width: 1024px){

}
@media all and (max-width: 992px){

}
@media all and (max-width: 768px){

}
@media all and (max-width: 720px){

}
@media all and (max-width: 600px){

}
@media all and (max-width: 540px){

}
@media all and (max-width: 480px){

}
@media all and (max-width: 424px){

}
@media all and (max-width: 414px){

}
@media all and (max-width: 400px){

}
@media all and (max-width: 384px){

}
@media all and (max-width: 375px){

}
@media all and (max-width: 360px){

}
@media all and (max-width: 320px){

}