The secret to viewport?

Mobile
1

I am attempting to allow my website at least slightly better mobile accessibility by using metatag viewport in order for the whole page to show up instead of the top right corner. I also want to allow the user functionality to enlarge at will.

I’m using this: <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

but it isn’t working (at least on iPhone safari, which is the only device I have to test on).

Is there more to this than just the viewport meta?

code is currently on this page:

thanks

2

Hi refrakted and welcome to SitePoint :slight_smile:

What you’re using is correct.
I think the problem is with your container which has a fixed width: 800px;
Change it to 100%.

If you want everything to work on smart phones, you’ll need to apply flexible layouts, or at least override your fixed desktop widths using the below.

I personally load a separate style sheet once the device width is detected (the below will cover iphone portrait and landscape):

<link rel="stylesheet" media="screen and (min-width : 320px) and (max-width: 480px)" href="css/smartphone.css">

Hope this helps,
Barry

3

Thanks, Barry. I had read on some tutorials " every website should be optimized to accommodate smaller screen size, even if it’s a fixed width design." It’s just that no one has mentioned the normal viewport meta tag ONLY works with flex widths. Until I get to a point where I can convert all my containers to % widths, I can at least achieve my goals on a fixed width design by using a fixed width in my viewport tag:
<meta name=“viewport” content=“width=800”>

Source: http://www.bigbossmas.com/web-development/responsive-web-design-designing-a-website-for-mobile-devices/

4

Wow, I wasn’t aware of that trick. I did look at your post earlier but was sure of the best solution. Thanks for posting your findings and the link. :slight_smile:

5

I found this page regarding the viewport tag informative:

http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho?utm_source=Responsive+Design+Weekly&utm_campaign=58b9f56e5d-Responsive_Design_Weekly_026&utm_medium=email

6

you can use media queries in css and make a responsive layout too :slight_smile: