I have this @media setup:
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:
@media screen and (min-width: 769px) {
/* STYLES HERE */
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
@media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
With this setup it works on the iPhone but it does not work in the browser.
Is it because I already have device in the meta, and maybe have max-width:480px instead?
This question is related to
css
mobile
media-queries
The underlying issue is using max-device-width vs plain old max-width.
Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
@media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
@media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px.
This will work on desktops when the window is narrowed. */
}
for some iPhone you have to put your viewport like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />
If website on small devices behavior like desktop screen then you have to put this meta tag into header before
<meta name="viewport" content="width=device-width, initial-scale=1">
For media queries you can set this as
this will cover your all mobile/cellphone widths
@media only screen and (min-width: 200px) and (max-width: 767px) {
//Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px //
}
For iPad and iPad pro you have to use
@media only screen and (min-width: 768px) and (max-width: 1024px) {
//Put your CSS here for 768px to 1024px width devices(covers all width between 768px to 1024px //
}
If you want to add css for Landscape mode you can add this
and (orientation : landscape)
@media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait) {
//Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //
}
The correct value for the content attribute should include initial-scale instead:
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
^^^^^^^^^^^^^^^Source: Stackoverflow.com