Responsive css styles on mobile devices ONLY

Question

I m trying to make my responsive CSS styles work only on tablets and smartphones  Basically I have a style for desktop  a style for mobile  portrait and a style for mobile  landscape  I don t want the mobile styles interfering with the desktop presentation at all  I have played around with countless media queries  but the result either the mobile styles are getting displayed on the desktop  or the mobile styles are displaying only on mobile devices but with only one set of rules  non-responsive   Is there a way I can keep the two completely separate   My code I have right now goes like this      regular desktop styles      media only screen  and  max-device-width  600px               mobile only styles when the device is 0-600px in maximum width      media only screen  and  max-device-width  1000px              mobile only styles when the device is up to 1000px in maximum width

User · Answer

Yes  this can be done via javascript feature detection   or browser detection   e g  Modernizr     Then  use yepnope js to load required resources   JS and or CSS

User · Answer

Why not use a media query range   I m currently working on a responsive layout for my employer and the ranges I m using are as follows   You have your main desktop styles in the body of the CSS file  1024px and above  and then for specific screen sizes I m using    media all and  min-width 960px  and  max-width  1024px         put your css styles in here        media all and  min-width 801px  and  max-width  959px         put your css styles in here        media all and  min-width 769px  and  max-width  800px         put your css styles in here        media all and  min-width 569px  and  max-width  768px         put your css styles in here        media all and  min-width 481px  and  max-width  568px         put your css styles in here        media all and  min-width 321px  and  max-width  480px         put your css styles in here        media all and  min-width 0px  and  max-width  320px         put your css styles in here        This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range  i e  320  480  568  768  800  1024  as for all the others they will just be responsive to the size available   Also  don t use px anywhere - use em s or

User · Answer

What s you ve got there should be fine to work  but there is no actual  Is Mobile Tablet  media query so you re always going to be stuck   There are media queries for common breakpoints   but with the ever changing range of devices they re not guaranteed to work moving forwards   The idea is that your site maintains the same brand across all sizes  so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport   To further the answer above  using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones  however with the new releases of touch based screens that is not as good an option as it once was

User · Answer

I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode  Essentially the fonts and line spacing looked fine in every other context  so I just needed the one exception for mobile landscape  This media query worked perfectly    media all and  max-width  600px  and  orientation landscape            styles here

[css] Responsive css styles on mobile devices ONLY

Examples related to css

Examples related to responsive-design

Examples related to media-queries