refrakted — 2012-09-08T12:39:14-04:00 — #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:
computerbarry — 2012-09-11T06:03:34-04:00 — #2
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):
<link rel="stylesheet" media="screen and (min-width : 320px) and (max-width: 480px)" href="css/smartphone.css">
Hope this helps,
refrakted — 2012-09-12T12:01:26-04:00 — #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">
ralphm — 2012-09-13T00:18:07-04:00 — #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.
stevenhu — 2012-10-19T18:16:10-04:00 — #5
localhost8080 — 2012-11-11T09:41:22-05:00 — #6
you can use media queries in css and make a responsive layout too