How to scale the viewport to a minimum width

1
votes

Problem: I have a page that looks terrible <480px and doesn't display enough relevant information to the user.

Attempted Solutions:

  • (ex. 320px screen) set the initial scale to 1.5, but then I need to set the scale accordingly for all the screen sizes between 320-480px.
  • (ex. 320px screen) set the width of your viewport to 480px, however this makes you need to scroll around the screen instead of zooming out like setting the scale would do.

Question: What it seems I need is a combination of the two solutions. One that will scale my viewport, but only until it shows a min-width such as 480px worth of content on the screen. Is this possible without javascript or is solution #1 what I would need to do?

Other considerations: Solution needs to work on all browsers/mobile (IE11+)

2
javascripthtmlcssresponsive-designviewport

2 Answers

1
votes

I'm not 100% sure what you are trying to do but if I understand correctly, you can set this in css. Setting the width to 100% will keep it flexible to your viewport window & setting a minimum width will not allow it it get any smaller than that. 

html,body { 
     width: 100%; 
     min-width: 480px;
     height: auto;
}
0
votes

Have you attempted to use media queries ?

For example: 

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}