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

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

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

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

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

If website on small devices behavior like desktop screen then you have to put this meta tag into header before   lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt   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

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

Examples related to css

Examples related to mobile

Examples related to media-queries