iPad and iPhone scaling issues

Question

My base magazine is 1536 x 2048 so looks great on iPad but on iPhone the right hand side gets cut off...

What dimensions should I start with?

Or is this a CSS issue, if so what do I place in there to make it work?

Ideally I would be happy to scale the iPhone down so it fits width wise and has empty space at the top and bottom so it stays in proportion.

Any thoughts on how I would do this in the CSS. I'm thinking something like:

Margin top: auto;
Margin bottom: auto;

But not sure if it would work or how to scale the iPhone only version?

Answer 1

If you set the Device Viewzoom to Page Width or Device Width, it should match the width of the iPhone:
https://ajarproductions.com/pages/products/in5/help.php#device-viewport-zoom

UPDATE/FIX:

It appears in this particular case that given the page width and the width of an iPhone in portrait mode, the scale needed for the width of the page is smaller than the default setting allowed for the device. This can be fixed by adding a minimum-scale value to the viewport tag:

<meta name="viewport" content="width=1536.00,minimum-scale=.2">

This extra code will automatically be added in a future version of in5 (1.6.2 or higher) when either Scale to Device Width or Scale to Page Width is selected as the Viewport Zoom Option.

Comments

Yeah I thought that as well but unfortunately that doesn't work. Please see the attached images for the iPad and iPhone

iPad - https://dl.dropboxusercontent.com/u/7787010/images/Photo%2031-07-2013%208%2048%2056.jpg
iPhone - https://dl.dropboxusercontent.com/u/7787010/images/Photo%2031-07-2013%208%2048%2032.jpg

This is using device width... any ideas?

---

Try using Page Widtn, and make sure the first page matches the default width of the InDesign document.

---

I tried it but unfortunately still doesn't work.

See image here - https://dl.dropboxusercontent.com/u/7787010/images/Screen%20Shot%202013-08-04%20at%2011.32.58%20AM.png

---

Can you post the HTML files for me to look at?

---

Sure. Here you go - http://bit.ly/13ElLIH