CODEWITHSUNDEEP
htmlcssipadmobile-safari
John Barth
John Barth

Reputation: 23

Meta Viewport tag not scaling page

I'm developing a page for iPad visitors, but the the meta viewport tag doesn't seem to be working. I'm using the following tag

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

The page in question is here: http://www.ixl.com/files/quia/users/landing_pgs/ipad_ret/page.html.

I've tried many permutations of the viewport meta tag, but none seem to do the trick. Safari keeps rendering the page much wider than the viewport.

Any insights would be much appreciated!

Upvotes: 0

Views: 165

Answers (1)

user4566987
user4566987

Reputation:

A viewport is not the only thing needed to make websites scale to the device viewed on. You need to look into media queries. You will generally have a couple of media queries, ie: mobile and a tablet version. In the media queries you will only change the coding for the necessary things that need changes. So if you are looking to only fit the sizing of your page, only change the sizing in your media queries. There's a lot on here about media queries, check it out.

Adding on:

You would format it somewhat like this:

"large" css here

 @media only screen and (max-width:800px)
 {
"medium" css changes here
}

 @media only screen and (max-width:480px)
{
"small" css changes here
}

Upvotes: 1

Related Questions