Does Chrome,Firefox,etc specify max-device-width to mobile?

Question

I add a media query to my html file

<link type="text/css" rel="stylesheet" href="xxx-mobile.css" media="screen and (max-device-width:360px)">

then I adjust the width to find the point the css will have effect.

The browsers I tested in my mobile are:

1. chrome;
2. firefox;
3. opera;
4. android webkit browser;

Results are as follows:

1. chrome, firefox and opera change style at the point max-device-width:360px;
2. android webkit browser change style at the point max-device-width:1080px(my screen resolution is 1080*1920);

I want to know chrome whether specify mobile max-device-width or not and standard of the max-device-width sepecified.

Answer 1

Firefox provide it you can use

max-width: -moz-available;

Answer 2

I thought either chrome or android webkit browser make something wrong, but now I think they both are right. They all do well, the difference they presented is because device-width is deprecated(https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width ).So device-width is the device actual width, and because it is deprecated,it will be treated as width(viewport width) which is not actual device width.

Answer 3

For better view port size , their standard and uses take a look at bellow links

"sizes for various devices"

for other trends look here

and yes do remember to include

<meta name="viewport" content="width=device-width, initial-scale=1">