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".
I had a look at the source code. It's a little tricky to follow it all through, but I couldn't really see any big differences other than the fact there is capabilities array, which contains touch and mobile options. When touch is enabled, there are four touch events that are emulated. Other than that, there seems to be some scaling logic that differs between the modes.
Not sure if this is of much help. If you or anyone else is interested in looking deeper into this, I'd check out inspector.js, with most of the logic found in the _calculateAndEmulate and _applyDeviceMetrics functions.
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.
One main difference is the User-Agent request header Chrome will send.
If you choose Mobile, you will get something like this,
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
whereas with Desktop, it will look like this:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/54.0.2840.99 Safari/537.36
(Specifics depending on your OS, Chrome version etc. of course.)
So it will help you in testing/debugging, if you are doing server-side User-Agent sniffing. (For purposes such as to deliver different content for Desktop vs Mobile, to redirect to a mobile subdomain, …)
来源：https://stackoverflow.com/questions/40708720/what-is-the-difference-between-a-mobile-and-a-desktop-device