how to set a minimum width for your site / viewport and have browser scale if the width is below that

Question

I'm trying to wrap my brain around viewports / scales. I have a site I have to program, and the design I've been given is responsive, but it really doesn't work if the device's width is below 420px.

At anything below 420px, I'd love it if the browser would render the site as if it were 420px wide, just zoom everything out, but I can't figure out how to do this.

I've seen how you can dynamically change the meta viewport tag, but when I do this, it doesn't seem to have any affect, and I'm not sure that's the best way to approach what I'm trying to achieve.

At any rate, this is what I tried:

var minBP = 420;
//ww = window width

if (self.ww < minBP && lastScreenWidth > minBP){ //site is smaller than minimum allowed width, modify viewport
    var viewportString = "width=" + minBP + ", initial-scale=1.0";
    $('#blackrock-viewport').attr('content',viewportString);
}

Anyone know how to render a scaled-out 420 viewport width when the browser drops below these dimensions?

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

well you can do that in css by using Media Queries it allows you to manipulate evrything in diffrent screens

for exemple if you want to change the width of div in 420px screen you can do this :

@media (min-width:420px) { 
div{
 width:50px;
   }
}

edited May 23 '17 at 12:24

Community

1
1

answered Mar 22 '16 at 00:27

Brahim Chougrani

61
1
6

right - but then I would have to adjust the size of every single element in the site - the viewport tag seems to be capable of rendering a zoomed view somehow, so I'm hoping to find a way to just change one or two variables, not an entire site's CSS. – mheavers Mar 22 '16 at 01:43
@mheavers You don't have to set the size of every element, only the supposed _root element_, the one that defines the width of your page. – xpy Mar 22 '16 at 07:54

score 0 · Answer 2 · answered Mar 22 '16 at 08:05

You can just use media queries to target specific elements on specific screen sizes.

For your situation, you just have to limit your wrappers width to your preferred size.

Supposing that you have a div that wraps all your page, let's say .wrapper.

@media screen and (max-width:420px) { 
  .wrapper{
    width:420px;
  }
}

Of course, you can do this also without media queries by just setting the min-width property of your wrapper.

.wrapper{
  min-width:420px;
}

But I suppose that with media queries you are more flexible.

how to set a minimum width for your site / viewport and have browser scale if the width is below that

2 Answers2