Mark Mark - 4 months ago 50
Javascript Question

Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?

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, maybee through jscript? Alternatively, can these @media queries be disabled alltogether?

Thanks!

Answer

I had the same issue with a client. But 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: here, 1440 is your preferred screen width.

Hope this helps :)

Comments