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?

Answer 1

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;
   }
}

Answer 2

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.