Can I set a viewport higher than 1024?

748 views Asked by At

We are looking at an existing (non-responsive) site whose width is 1230 or so. So on mobile devices its content, even compressed as it is, loses about 10% off to the right.

That's bad, as their phone number (plenty large enough to see, even compressed on a mobile) is right aligned and we lose some of the digits unless the viewer scrolls across.

As a quick stop-gap remedy I figured we could set:

<meta name="viewport" content="width=1235">

But that's ignored on the phone I'm testing with.

I've checked that the phone responds to a much lower viewport width - if I set it to 300 or something than I get zoomed in content (top left hand corner), as you'd expect. Just it doesn't respond to a viewport set beyond 1024.

1

There are 1 answers

0
Ali Gajani On

Remember, the viewport is an effective screen size for mobile devices. The idea is that since your website isn't responsive, it doesn't do any good. The problem lies in your CSS rather.

But yes, you can set the viewport higher than 1024. Generally, the viewport should be slightly wider than your web content to make sure you have a little bit of margin next to your text for readability.

Have a look at this Introduction to Viewports.

Don't forget to use this along with media queries to achieve responsiveness. I usually use this and it works for me across a range of mobile devices. You don't have to hardcode content width though.

<meta name="viewport" content="width=device-width, initial-scale=1">

But as I mentioned earlier, the problem lies with your CSS positioning and the viewport tag isn't the solution. You can probably do a media query to reduce size of the phone number.