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

0
votes

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.

2
androidhtmlcssgoogle-chrome
Did you include <meta name="viewport" content="width=device-width, initial-scale=1">? – Manngo
@Manngo I didn't add it before, but after I add it, though have a good look, just as font looks bigger, but the point of css effect doesn't change. – dzhh

2 Answers

1
votes

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">
0
votes

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.