Tim Jahn
Tim Jahn

Reputation: 1174

Resize site width to fit within width of iPad screen

I have a site that is 2048px wide. Is there a way to automatically have the iPad fit the entire site width on the screen when the site is loaded? I've tried experimenting with meta viewport in a few different ways:

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

This hasn't worked though. The site is still too wide and spills off screen on the iPad.

Upvotes: 9

Views: 27353

Answers (6)

Cubiczx
Cubiczx

Reputation: 1115

This works fine:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

Upvotes: -1

steffanjj
steffanjj

Reputation: 887

The correct way to fix this problem are by using percentages rather than fixed widths. But if you "cannot" change that, you can force your viewport to scale down by using 0.x in initial-scale like:

<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />

Upvotes: 1

jjgrainger
jjgrainger

Reputation: 99

You can pass a fixed size to the content width like so:

<meta name="viewport" content="width=2048" />

May need some tweaking to allow for padding either side, but should load the site at that size and allow users to zoom in.

Upvotes: 7

britter
britter

Reputation: 137

I was working on a site with the same problem recently, it wouldn't stay zoomed out between page clicks for a fixed 960px width site. Try:

<meta name="viewport" content="width=device-width, initial-scale=-100%" />

So far so good, passed on my Ipad Air.

Upvotes: 0

Sean
Sean

Reputation: 344

Try setting min-width: 2048px; to the html and body tags in css. That's fixed some weirdness on iPads for me before, but not sure if it will apply to this one.

Upvotes: 0

Vlad
Vlad

Reputation: 795

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

That's what I use for my website.

Upvotes: 1

Related Questions