CSS styling in portrait or landscape mode

[Joe Hewitt]

The ability to rotate the phone means that you may have to adjust all
sorts of details to keep your page looking good at either
orientation. I've found the easiest way to cope is to have a little
JavaScript detect that the phone was rotated and set an attribute on
the body element indicating the current mode. You can then use a CSS
selector to style different versions of certain elements in portrait
mode vs. landscape mode. For instance:

.toolbar {
height: 60px;
font-size: 28pt;
}

body[orient="landscape"] .toolbar {
height: 30px;
font-size: 16pt;
}

Here is a demo that shows a "liquid layout" in which the font size and
the size of toolbars are scaled down when the user switches into
landscape mode . This is the same demo as in my previous post about
hiding the upper toolbar, so you'll notice that when you rotate the
phone it does properly adjust the layout to fill the vertical space
vacated by the toolbar after it disappears.

http://www.joehewitt.com/files/liquid1.html

[SunboX]

here you can find an javascript event when orientation changes:
http://forum.mootools.net/viewtopic.php?id=4052

[Christopher Allen]

On 7/2/07, Joe Hewitt <joeh...@gmail.com> wrote:
> http://www.joehewitt.com/files/liquid1.html

Joe,

I could swear this was working as I groggily looked at it right before
I went to bed. But this morning when I go to portrait it isn't
resizing as I thought it did last night. Did you change something
today?

-- Christopher Allen

[Christopher Allen]

On 7/2/07, Christopher Allen <Christ...@iphonewebdev.com> wrote:
> I could swear this was working as I groggily looked at it right before
> I went to bed. But this morning when I go to portrait it isn't
> resizing as I thought it did last night. Did you change something
> today?

Hrrrmmm, I did a refresh and now it is working again. I wonder what I
did that it got confused and stopped working?

The only thing I notice now is that the bottom bar doesn't display at
all on Mac Safari 2, and shows at iPhone portrait height on Mac Safari
3. My ideal would be that this example page would work on both and put
the bars in a desktop reasonable place (i.e. not necessarily the
bottom, though that would be ok, but someplace larger then iPhone
size.)

I'm going to take it apart and see if I can reproduce it from scratch
and see if I can add to it.

Great work! Especially the hide URL bar part -- that was number 2 on
my list of problems to solve.

-- Christopher Allen

[Christopher Allen]

On 7/2/07, Christopher Allen <Christ...@iphonewebdev.com> wrote:

> I could swear this was working as I groggily looked at it right before
> I went to bed. But this morning when I go to portrait it isn't
> resizing as I thought it did last night. Did you change something
> today?

Hrrrmmm, I did a refresh and now it is working again. I wonder what I

[codeninja]

so how did you get the menu bar to hide? is that the scrollTo action?
is there an actual call to hide it? and can you hide the bottom bar?

Thanks, nice work.

[Christopher Allen]

On 7/2/07, codeninja <code...@gmail.com> wrote:
> so how did you get the menu bar to hide? is that the scrollTo action?
> is there an actual call to hide it? and can you hide the bottom bar?

He is doing just the simple javascript:

window.scrollTo(0, 1);

However, in his example this is inside a function that is called
periodically. I'm not sure if that is required. On my list to figure
out ;-)

-- Christopher Allen

[Joe Hewitt]

As far as I know, there is no way to hide the bottom bar. The urlbar
will hide
if the user scrolls the page, which is how I guessed that scrollTo
would also
hide it, but I have yet to find any way to hide the bottom bar from
the user's
perspective.

[Jerry]

just following up on the bottom bar issue:

It shows (mid screen) with Windows Safari 3.0.2 but not with Windows
IE

Refreshing doesn't change either.

-- Jerry