В чем разница между мобильным и настольным устройством?

Используя Инструменты разработчика браузера Chrome, я хотел добавить пользовательское устройство в вкладка "Эмуляторы". Вы можете выбрать несколько параметров, таких как ширина и высота. А также выбрать между:

  • Мобильный
  • Мобильный (не сенсорный)
  • Рабочий стол
  • Рабочий стол (сенсорный)

Таким образом, разница между мобильным и настольным компьютером похоже, не в сенсорных событиях.

Устройство с размером экрана 1000*1000 пикселей. Мобильное (без сенсорного экрана)

и устройство с размером экрана 1000*1000 пикселей Рабочий стол

то же?

Или устройство с размером экрана 1000*1000 пикселей Мобильный

и устройство с размером экрана 1000*1000 пикселей Рабочий стол (сенсорный)

то же?

Итак, мой вопрос:

В чем разница между Desktop и Mobile с технической точки зрения?

Пожалуйста, объясните разницу как концептуально (это меня особенно интересует) и в DevTools.

Редактировать награду:

Я пришел к этому сомнению после ответа на другой вопрос и увидеть, как Google, Amazon и, возможно, некоторые другие крупные компании делают различия в том, как они отображают свои страницы. Дело не в размере экрана, а в типе устройства (если я прав). Поэтому мне интересно, какие технические аспекты заставляют их отличать настольный компьютер от мобильного, кроме того, что "мобильный телефон можно перемещать".


mobile device google-chrome-devtools desktop conceptual
person Alvaro    schedule 20.11.2016    source источник
comment
Хороший вопрос. Я не знаю о каких-либо реальных различиях с точки зрения эмуляции, но можно быстро просмотреть исходный код, чтобы увидеть, есть ли какие-либо программные различия между режимами. Как будет свободная минутка, посмотрю.   -  person Gideon Pyzer    schedule 21.11.2016

Ответы (3)


arrow_upward
5
arrow_downward

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

Не уверен, что это сильно поможет. Если вы или кто-то еще заинтересован в более глубоком изучении этого, я бы проверил inspector.js, где большая часть логики содержится в функциях _calculateAndEmulate и _applyDeviceMetrics.

person Gideon Pyzer    schedule 21.11.2016
comment
было бы интересно, если бы вы указали, какие события касания эмулируются - person deblocker; 30.11.2016

arrow_upward
5
arrow_downward

введите здесь описание изображения

Таргетинг на ПК и мобильные устройства

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

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

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

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

Сравнение первоклассных вариантов

Рабочий стол:

  • Большие, несколько экранов, которые вмещают больше контента на экране одновременно.
  • Больше печатать — общий ввод — клавиатура.
  • Наведите указатель мыши и щелкните по ссылкам. Общий ввод осуществляется с помощью мыши.
  • Расположен на столе.
  • Интенсивное использование.
  • Более мощное оборудование (память и вычислительная мощность дешевле).
  • Силовая производительность.

Мобильный:

  • Один экран меньшего размера, где оптимизация пространства имеет первостепенное значение.
  • Меньше набора текста — распространенный тип ввода — сенсорный экран.
  • Касание и жест.
  • Расположен в кармане.
  • Повседневное использование.
  • Аппаратное обеспечение с меньшими возможностями. т.е. Маленькая и крутая оперативная память и обработка означают меньшую отдачу от ваших денег.
  • Энергоэффективность.
person WonderWorker    schedule 28.11.2016
comment
Очень хороший ответ. Я не уверен, что согласен с повседневным использованием на мобильных устройствах. - person Alvaro; 29.11.2016
comment
У вас есть какие-либо ресурсы об этом? - person Alvaro; 29.11.2016
comment
@Alvaro Спасибо за добрые слова и вклад. Универсальность устройств, управляемых компьютером, настолько велика, что с каждым годом становится все больше. Итак, когда я придумал термин «случайное использование», я намеревался передать то, как самые популярные приложения для трех основных мобильных операционных систем были значительно уменьшены по сравнению с их настольными братьями и сестрами, но моя точка зрения явно искажена по сравнению с моим цифровым и фон печатных СМИ. У них так много применений, что почти невозможно рассмотреть их все. Мне было бы очень интересно узнать больше о вашей точке зрения, чтобы помочь мне переосмыслить использование слов. - person WonderWorker; 29.11.2016
comment
Это описание разницы между мобильными и настольными устройствами. Я думаю, что OP (и я) хотел больше узнать о технических различиях, например, о том, как область просмотра обрабатывается на разных устройствах (и разные настройки в Dev Tools). - person Bennett McElwee; 10.07.2018

arrow_upward
4
arrow_downward

Одним из основных отличий является заголовок запроса User-Agent, который будет отправлять Chrome.

Если вы выберете Mobile, вы получите что-то вроде этого,

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko)
  Chrome/46.0.2490.76 Mobile Safari/537.36

тогда как с Desktop это будет выглядеть так:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
  Chrome/54.0.2840.99 Safari/537.36

(конкретные особенности зависят от вашей ОС, версии Chrome и т. д., конечно.)

Так что это поможет вам в тестировании/отладке, если вы выполняете обнюхивание User-Agent на стороне сервера. (Для таких целей, как доставка различного контента для ПК и мобильных устройств, перенаправление на мобильный поддомен и т. д.)

person CBroe    schedule 23.11.2016