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

Question

Использование Chrome Browser DevTools Я хотел добавить пользовательское устройство в Emulated devices tab. Вы можете выбрать несколько параметров, таких как ширина и высота. А также выбрать между:

• Mobile
• Mobile (не сенсорный)
• Desktop
• Desktop (сенсорный)

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

---

Является ли устройство 1000 * 1000px размер экрана мобильного (без касания)

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

то же самое?

или устройство 1000 * 1000px размер экрана мобильного

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

то же самое?

---

Так что мой вопрос:

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

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

---

РЕДАКТИР щедрот:

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

Answer 1

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

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

Answer 2

Главное отличие заключается в том, что заголовок запроса 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 версии и т.д. конечно.)

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

Answer 3

ориентируются настольные компьютеры и мобильная

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

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

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

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

Премьер соображением сравнение

Desktop:

• Bigger, несколько экранов, которые вместить больше контента на экране одновременно.
• Больше ввода текста - общий ввод - клавиатура.
• Наведите указатель мыши и щелкните ссылку - общий ввод - мышь.
• Расположен на столе.
• Тяжелое использование.
• Более надежное оборудование (память и вычислительная мощность дешевле).
• Мощность.

Мобильные:

• Меньший, один экран, где оптимизация пространства имеет первостепенное значение.
• Меньше ввода - общий тип ввода - это сенсорный экран.
• Touch and gesture.
• Расположен в кармане.
• Casual использование.
• Меньше возможностей оборудования. То есть Маленькая и крутая работающая память и обработка означают меньше ударов за ваши деньги.
• Энергоэффективность.