I'm currently working on a responsive style sheet which is live at the moment but looks horrendous on non desktop dvices as it is a work in progress.
Is it possible to use some JavaScript to force the desktop layout to load on every device regardless of viewport size?
I'm currently working on a responsive style sheet which is live at the moment but looks horrendous on non desktop dvices as it is a work in progress.
Is it possible to use some JavaScript to force the desktop layout to load on every device regardless of viewport size?
Share Improve this question asked Mar 19, 2013 at 20:50 Adam ScotAdam Scot 1,4094 gold badges26 silver badges43 bronze badges 3- 7 Dude, you really need a dev instance of your site. – Jacob Mattison Commented Mar 19, 2013 at 20:52
- 1 Media queries? developer.mozilla/en/docs/CSS/Media_queries – bfavaretto Commented Mar 19, 2013 at 20:52
- @bfavaretto I guess OP uses them, so the problem how to disable them. – dfsq Commented Mar 19, 2013 at 20:56
3 Answers
Reset to default 5add this to your head
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
Be sure to change the SITE_MIN_WIDTH with your min width of the site. this should force the device to load in to proper sizing.
It sounds like you want to disable some of your media queries with JavaScript.
As far as I know, no, you can’t do this.
You could do the following, although it’s very roundabout:
Add a class to the
<html>tag, e.g.responsivePrefix all the CSS blocks that aren’t currently working as you want with that class, so that they only apply when the class is present.
On page load, use JavaScript to remove that class from the
<html>tag.
But then, presumably, you’d need a way to turn them back on when checking them on the devices you’re coding for. Otherwise why have them on your live site in the first place?
Media Queries simply call different CSS files based on the current resolution.
If it is mobile first responsive it starts with the lower sized screen and builds up. Editing your CSS and removing any CSS that affects screens smaller than desktop should do the trick. However, not sure in what system you are using that the site is already built and you need to disable. Their could be hundreds of ways to do this. I do not know what OP is but I would suggest editing your CSS files. You should be able to find what CSS is being loaded by using Firebug on Firefox.