Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize site width to fit within width of iPad screen

Tags:

css

ios

ipad

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.

like image 911
Tim Jahn Avatar asked Feb 15 '13 20:02

Tim Jahn


People also ask

How do I resize a Web page to fit my iPad screen?

This post looks better in our award-winning app, Tips & Tricks for iPhone. When browsing web pages in Safari, you can double-tap on a column, word, or picture to fit its width to your screen. Double tap again to zoom out. You can also pinch-in or pinch-out on screen to have more control over how far you zoom in.

How do I fix the aspect ratio on my iPad?

Question: Q: HOW TO CHANGE ASPECT RATIO ON AN IPAD 4 Answer: A: Any available aspect ratio controls will be provided by App in which you are viewing content. Otherwise, for iOS/iPadOS, there are no system-level controls that influence the displayed aspect ratio.

Why doesn't my screen fit my iPad?

What has most likely happened is you may have accidentally enabled the zoom feature by double tapping it with 3 fingers. To fix this issue, simply double-tap on the screen with 3 fingers, and the screen will usually go back to normal and eliminate the magnification.


2 Answers

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.

like image 53
jjgrainger Avatar answered Oct 16 '22 03:10

jjgrainger


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

like image 43
Vlad Avatar answered Oct 16 '22 03:10

Vlad