iOS (portrait)

Legacy Dynamo
1

I’m tweaking a preexisting design for mobile devices. It has a fixed-width (900px) layout and as usual I’m using this meta tag:

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

When viewed on the iOS simulator the site looks ok in landscape orientation, though on the iPhone (Retina) there’s an intermittent but minor page centering issue which isn’t there on the iPad (Retina) which may be due to a hiccup with the simulator (caching?).

The bigger issue however is with portrait orientation. I can’t get the page to scale-to-fit the 768px/320px viewport width on either device which I assume is due to the fixed, not flexible layout.

Solutions:

Instead of the above meta I tried targeting different pixel-specific viewport sizes, e.g.,

<meta name="viewport" content="width=320">

But that did nothing.

I also tried changing the different scale values above and using @media queries to modify the layout to fit in portrait orientation, again with no change.

Ideas?

Todd

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

The IOS simulator does not always reflect reality. My ipad is an original,
so not sure how the different models really compare.

Sympathize with ya buddy.

–
Ernie Simpson

On Sun, Sep 16, 2012 at 1:09 PM, Todd email@hidden wrote:

I’m tweaking a preexisting design for mobile devices. It has a fixed-width
(900px) layout and as usual I’m using this meta tag:

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

When viewed on the iOS simulator the site looks ok in landscape
orientation, though on the iPhone (Retina) there’s an intermittent but
minor page centering issue which isn’t there on the iPad (Retina) which may
be due to a hiccup with the simulator (caching?).

The bigger issue however is with portrait orientation. I can’t get the
page to scale-to-fit the 768px/320px viewport width on either device which
I assume is due to the fixed, not flexible layout.

Solutions:

Instead of the above meta I tried targeting different pixel-specific
viewport sizes, e.g.,

<meta name="viewport" content="width=320">

But that did nothing.

I also tried changing the different scale values above and using @media
queries to modify the layout to fit in portrait orientation, again with no
change.

Ideas?

Todd

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options