CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Chris Rice
Chris Rice

Reputation: 819

Set CSS @Media min-width value with javascript

I am using bootstrap 3.0 for my website and i use @media queries in CSS to create a responsive design. I would like to add a button that allows someone on a phone to view the site as they would see it on a larger desktop screen.

Is there a way i can force CSS to think that the max-width/min-width is a certain size? I don't want to actually show scrollbars, just change what rules are applied to match what would be shown for larger screen sizes.

Upvotes: 2

Views: 863

Answers (2)

chakri
chakri

Reputation: 629

You will follow these steps

1)add this meta tag to your html page inside of head tag

<meta name="viewport" content="width=device-width; initial-scale=0.95;" />

2)in css file for every .class you can do this one

    @media(max-width:1280px){
       .abc{ width:100%;}
    }

try to these steps. You can solve your problem

Upvotes: 0

chrisgonzalez
chrisgonzalez

Reputation: 4213

You could manipulate the meta viewport tag to use a specific pixel dimension, an example with jQuery would look like:

$('meta[name="viewport"]').attr("content", "width=1280")

If you wanted the screen to render 1280 pixels into the viewable area.

Upvotes: 3

Related Questions