Menu
I have my site HEAVILY modified via @media queries to display very slimdown'd on mobile phones. However, my users are asking for the desktop version of the site (available via a link).
To go a step further, the desktop site itself also gets modified by @media queries depending on resolution. I was thinking of picking one 'desktop' resolution, say 1440x900 and forcing the mobile phone to display at that resolution?
Is this possible, maybe through JavaScript? Alternatively, can these @media queries be disabled altogether?
Thanks!
626
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Media queries and @media rules do not affect the behavior of ! important in any way, because they do not have any effect on any part of the cascade. (By extension, this also means you cannot use a @media at-rule to "remove" an ! important flag, even if you use a more specific selector.)
@media is the actually media query. The word screen is adding the 'conditions' to the media query. So @media screen is telling the media query to apply (whatever other conditions) to screens. For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.
To override a specific media query rule, append a new css rule after the one you want to override. For example, if the last css rule does not have a media query attached, it will override all previously declared media queries (presuming the same selectors).
I had the same issue with a client. But the problem was there were 120+ CSS files contained the media queries. So what I did is, set the viewport width. I have used this snippet on that site and working fine. Using this, even you can give the option for the users to toggle between responsive design and non-responsive design.
$(document).ready(function(){
$('meta[name="viewport"]').prop('content', 'width=1440');
});
Note: 1440 is your preferred screen width.
Hope this helps :)
56
I would add a class to your <html> or <body> such as class="force-desktop" and then on your media selector add
@media () {
body:not(.force-desktop) {
//styles
}
}
or something similar
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
