Существует ли матрица где-нибудь, чтобы получить реалистичную доступность экрана для наиболее распространенных телефонов, которые учитывают разрешение экрана с видимыми панелями инструментов?
Нам нужно разработать прокручивающийся сайт для мобильных/планшетов, и хотя мы стараемся сделать css максимально возможной, краткий опирается на фоновые изображения, что означает, что нам нужны разнообразные медиа-запросы для переключения изображений на лучший опыт - реальное руководство по разрешению было бы действительно полезно.
Приветствия
В Google Chrome откройте инструменты разработчика, нажав F12, и нажмите значок шестеренки, чтобы перейти в Настройки → Переопределения, включить "Пользовательский агент" и выбрать нужное устройство - с помощью "Матрицы устройств" вы можете настроить экран размер и многое другое.
Проверьте 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/) для получения последних данных
@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) {
Должны быть стандарты
Я думаю, вам обязательно нужно попробовать этот сайт: http://responsivetools.com/
Это даст вам краткое представление о том, как выглядит ваш сайт для разных мобильных и планшетов.
Существует множество онлайн-сервисов, в которых вы можете просматривать на вашем сайте "через" дисплей телефона с указанными разрешениями.
Например: mobilephoneemulator
Statcounter, вероятно, обеспечивает наилучшее количество хрустов на размерах экрана и многих других статистических данных. Их страница всегда дает мне проблемы с загрузкой, поэтому я предпочитаю найти кого-то, кто цитировал их статистику, а не сразу перейти к источнику, как этот блоггер:
Надеюсь, что это более прямой ответ на ваш вопрос!
Мы, возможно, захотим попробовать здесь: http://cartoonized.net/cellphone-screen-resolution.php, он в основном дает вам лучшее разрешение в зависимости от типа телефонов.
Это список для всех известных свойств 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){
}