Подтвердить что ты не робот

Статистика размеров мобильных и настольных компьютеров

Где я могу найти статистику по размеру экрана мобильного и настольного ПК?

Im, создающий отзывчивый сайт и, в частности, то, что им пытаются выяснить, это их различие в размерах между большинством телефонов и пользователями настольных компьютеров и планшетов, где я могу поставить точку останова. Я думаю, что должно быть, но знаю, что я должен проверить свои предположения.

Поэтому, чтобы быть ясным, я хочу, чтобы у телефонов был один набор стилей, а планшеты и настольные компьютеры - для другого набора.

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

Я только что закончил делать отзывчивый бизнес-сайт (https://plus.google.com/101258044853419629282/posts/GejAf734nP6), и вот что я могу вам сказать - точка останова определенно не 600px!

Вот факты (в терминах запросов CSS и @media):

  • Ширина рабочего стола 1366px просто превосходила 1024px как самый популярный размер: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

  • Тем не менее, на планшетах наиболее популярным является iPad со своим 1024x768px.

  • iOS Safari является нормальным и всегда сообщает правильный вид, т.е. независимо от того, есть ли у вас обычный iPad или Retina iPad, он скажет вам, что это 1024x768, аналогично iPhone скажет вам это 320x480.

  • У браузера Android больше проблем, так как на этой платформе разные экраны. Например, Nexus One имеет экран 480x800px, но при 254ppi (соотношение пикселей 1,5), отображаемое в CSS, фактически составляет 360x600. Даже более смешной Galaxy Nexus имеет экран 1280x720px при 316ppi (соотношение пикселей 2.0, например Retina), сообщает, что в окне просмотра 360 * 640.

Исключение составляет бета-версия Chrome на Android 4.0, в ландшафтном режиме у нее есть ошибка и похоже, что она сообщает ширину видового экрана как 1280 пикселей на этом Galaxy Nexus, что очень затрудняет конфликт с настольным CSS.

Заключение

Я лично использовал точку останова ширины экрана 768 пикселей, а именно: я рассматриваю iPad в ландшафте как рабочий стол, и я предполагаю, что минимальный размер рабочего стола составляет 1024 пикселя. Но я мог бы предположить это 800px, как в старые времена. Затем я рассматриваю 768px специально для iPad-портрета, так как у не-сетчатки iPads много места, но это не совсем маленький экран. Тогда все меньше, чем 768 пикселей, я называю смартфоном с маленькими экранами.

Для максимальной оптимизации вы можете использовать промежуточные точки останова на 640px, 600px, 480px, 360px, 320px и даже 240px (low-low-end андроиды), но, вероятно, хорошая практика сделать его полностью на основе% ниже 768px, чтобы он соответствовал автоматически.

UPDATE: одна полезная точка останова, которую я нашел, это 810px - ширина iframe на вкладке Facebook. Полезно, когда вы создаете приложения FB и хотите повторно использовать свой код webapp.

Ответ 2

Для последних результатов статистики изменения диапазона дат в этом URL: http://gs.statcounter.com/#resolution-na-monthly-200903-201401

В проектах, которые я построил, у нас есть точка прерывания медиа-запросов на ширине 1024px, так как это ширина iPad 1, 2 и Mini все ниже, чем "Mobile", а все выше - iPad + Desktop.

Вот как это делают разработчики @nytimes. см.: JavaScript Jabber Podcast 093: http://javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons/ Где они описывают это в 10:40.

Для более полного списка разрешений устройства: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

Как всегда зависит, на кого вы нацеливаетесь. Если вы создаете сайт/приложение для детей (у многих из которых будет low-end android), вам может потребоваться версия "ультрамобильного" с точкой разрыва при 320px (ширина).

Ответ 3

960 x 800 x 768 x 640 x 480 x 360 - это размеры, которые вы должны соблюдать для гибкого веб-дизайна.