the secret to viewport?

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:

http://www.refrakted.net

thanks

Hi refrakted and welcome to SitePoint :)

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):

Code HTML4Strict:

---

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

---

Hope this helps,
Barry

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-develo...obile-devices/

Quote:

---

Originally Posted by refrakted

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">

---

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. :)

I found this page regarding the viewport tag informative:

http://blog.javierusobiaga.com/stop-...m_medium=email

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