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:
Results are as follows:
I want to know chrome whether specify mobile max-device-width or not and standard of the max-device-width sepecified.
For better view port size , their standard and uses take a look at bellow links
for other trends look here
and yes do remember to include
<meta name="viewport" content="width=device-width, initial-scale=1">
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.
Firefox 提供您可以使用的
max-width: -moz-available;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.