0

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.

hawbsl
  • 15,313
  • 25
  • 73
  • 114
  • Can you explain why you need that `meta` tag? – Mr. Alien Jan 08 '14 at 10:39
  • @Mr.Alien i thought i had ... we're losing 10% of the content on a typical mobile device. want the site to "fit" a mobile device, even if squished – hawbsl Jan 08 '14 at 10:41
  • 1
    Nothing can be solved using meta, it's the layout which is badly drafted, CSS positioning is the issue, meta won't do anything here if your content is flowing out of the viewport – Mr. Alien Jan 08 '14 at 10:42
  • @Mr.Alien is your answer that mobile devices ignore viewports higher than 1024? If so please put that as the answer and I'll accept it. i can't tell whether you're answering the question or critiquing our approach. – hawbsl Jan 08 '14 at 10:46
  • could you not just use this `` to make it fit on the screen – Pete Jan 08 '14 at 10:46
  • @hawbsl no, I am just answering you, am not critisizing you, also, `content-width` works, but it's your CSS which has gone wrong, so even `meta` tag won't help you – Mr. Alien Jan 08 '14 at 10:48
  • @Pete that simply renders the content nice and large ... but top left hand corner ... lots of scrolling – hawbsl Jan 08 '14 at 10:49
  • @hawbsl anyways your website is non responsive, just leave that tag – Mr. Alien Jan 08 '14 at 10:50

1 Answers1

0

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.

Ali Gajani
  • 14,762
  • 12
  • 59
  • 100