Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between a Mobile and a Desktop device?

Using Chrome Browser DevTools I wanted to add a custom device in the Emulated devices tab. You can choose several options such as the width and height. And also choose between:

  • Mobile
  • Mobile (no touch)
  • Desktop
  • Desktop (touch)

So the difference between Mobile and Desktop doesn't seem to be the touch events.


Is a device of 1000*1000px screen size Mobile (no touch)

and a device of 1000*1000px screen size Desktop

the same?

Or a device of 1000*1000px screen size Mobile

and a device of 1000*1000px screen size Desktop (touch)

the same?


So my question is:

What is the difference between Desktop and Mobile from a technical point of view?

Please explain the difference both conceptually (I'm specially interested in this one) and in the DevTools.


Edit for bounty:

I came to this doubt after answering other question and seeing how Google, Amazon and probably some other big companies make the differentiation on the way they display their pages. It is not on screen size but on device type (if I am correct). So I am wondering what are the technical aspects that make them discern between a desktop and a mobile, other than "a mobile can be moved".

like image 316
Alvaro Avatar asked Nov 20 '16 19:11

Alvaro


1 Answers

enter image description here

Targetting Desktop and Mobile

The key difference between a mobile device and a desktop device, at least as far as the mobile/desktop setting in web browsers are concerned, is the physical size of the screen. This is not to be confused with the resolution of the screen.

When targetting a design at desktop, the interface is expected to include more expanded content on screen at one time, with the mobile version having the majority of the content hidden within icons to be expanded at a touch. The mobile version will be space optimised in comparison.

In fact, when a tablet has a larger than standard screen size e.g. the tablets with detachable keyboards available these days, mobile versions of the site can look over-optimised for space, which is the reason why browsers allow tablet users to opt to display sites in desktop mode.

The resolution of a mobile device might well be higher than on a desktop, but the fact that the screen is (at least assumed to be) so much bigger on a desktop machine, people using desktop machines are comfortable with more expanded content on screen at once than a people viewing on mobile devices.

Prime consideration comparison

Desktop:

  • Bigger, multiple screens that accomodate more content on screen at once.
  • More typing - Common input is keyboard.
  • Hover and click links - Common input is mouse.
  • Located on desk.
  • Heavy use.
  • More capable hardware (memory and processing power is cheaper).
  • Power performance.

Mobile:

  • Smaller, single screen where space optimisation is paramount.
  • Less typing - Common input type is touch-screen.
  • Touch and gesture.
  • Located in pocket.
  • Casual use.
  • Less capable hardware. I.e. Small and cool running memory and processing means less bang for your money.
  • Power efficiency.
like image 186
WonderWorker Avatar answered Oct 05 '22 10:10

WonderWorker