Media min-width max-width

Question

I have this  media setup   HTML    lt head gt     lt meta name  viewport  content  width device-width  user-scalable no    gt   lt  head gt    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

User · Answer

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 //        
  }

User · Answer

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

User · Answer

The correct value for the content attribute should include initial-scale instead    x000D   x000D   lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D                                                                     x000D   x000D   x000D

User · Answer

for some iPhone you have to put your viewport like this   lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  shrink-to-fit no  user-scalable 0    gt

User · Answer

I ve found the best method is to write your default CSS for the older browsers  as older browsers including i e  5 5  6  7 and 8  Can t read  media  When I use  media I use it like this    lt style type  text css  gt         default styles here for older browsers          I tend to go for a 600px - 960px width max but using percentages             media only screen and  min-width  960px               styles for browsers larger than 960px                media only screen and  min-width  1440px               styles for browsers larger than 1440px                media only screen and  min-width  2000px               for sumo sized  mac  screens               media only screen and  max-device-width  480px              styles for mobile browsers smaller than 480px   iPhone                media only screen and  device-width  768px              default iPad screens                 different techniques for iPad screening         media only screen and  min-device-width  481px  and  max-device-width  1024px  and  orientation portrait             For portrait layouts only                media only screen and  min-device-width  481px  and  max-device-width  1024px  and  orientation landscape             For landscape layouts only           lt  style gt    But you can do whatever you like with your  media  This is just an example of what I ve found best for me when building styles for all browsers   iPad CSS specifications   Also  If you re looking for printability you can use  media print

[css] @Media min-width & max-width

Examples related to css

Examples related to mobile

Examples related to media-queries