Strange behavior when hitting the back button on iphone safari

[Mr Junk]

Hello,

I have a demo app that I'm working on at http://trystuff.com/

The UI rotates and sizes properly when you rotate the iPhone.

if you click on the Movies icon and go to the second page, the UI
also rotates and sizes properly.

But, if you click on Safari's back button to go back to the initial
page and then rotate the iPhone, the landscape view is all out of
whack and way too large.

I have found that this is the case when hitting the back button from
any rotatable page.

Refreshing the page cures the problem.

Anyone have any ideas why that might be happening.

I'm using Joe's javascript to do the page rotation.

Thanks,
ml

[craig]

I have noticed something similar. I have a main page that sets the
viewport size and turns off scaling:

<meta name="viewport" content="width=320, height=480" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

These are observed when the page is loaded. However, if I go to
another page that allows scaling, do some zooming, and then return to
the main page, it no longer obeys the viewport settings -- it can
scale and get all out of whack. It may even scale for no apparent
reason when a user accesses a form menu, which is annoying. I can
only assume that the viewport settings are *not* restored when a page
is reloaded from cache. As you note, a formal reload does solve the
problem.

I am not sure if this is a bug, or something Apple intended. They do
note that some of the viewport settings are "initial" settings only,
so perhaps that is what we're seeing. Still, I would think these
would be reloaded from cache with the rest of the page content.

Craig

--

On Aug 5, 5:57 am, Mr Junk <j...@stuffthis.net> wrote:
> Hello,
>

> I have a demo app that I'm working on athttp://trystuff.com/

[Manish Sharma]

We are also facing the same behavior here. We wanted to have a functionality where we navigate to some page and then come back but coming back from the page takes away the scaling settings and the "app" look goes for a toss. We ended up loading the site in iframe and that worked fine. Still, It's really annoying.

- Manish

On 8/6/07, craig <craig....@cox.net> wrote:

I have noticed something similar.  I have a main page that sets the
viewport size and turns off scaling:

<meta name="viewport" content="width=320, height=480" />

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

[Mr Junk]

Cheers all,

I found out how to fix this, finally.

What I noted was that after clicking a link to go to the next page,
rotating, then hitting the back button and then rotating again:

The landscape mode would be messed up by having the scaling be off.
Everything on the screen was about 2x what it should be except the
Safari Location Bar. Unfortunately we don't get a command to set the
scaling value (how great that would be).

Finally after about 50 different things tried, I hit upon a web site
that had a unique take on the iPhone meta tag.

Joe's works great until the back button is hit and the iPhone is
rotated, then the scaling gets messed up in landscape mode until a
page reloads. Below is that meta tag:

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

Another guy on the net discovered that the setting below works great
with no scaling happening at all. The only problem is I like the
size change when rotating. It just needs to work properly. Below is
his meta tag:

<meta name="viewport" content="maximum-scale=0.6667, width=480" >

Finally I found a guy that had the below settings. . .it seems that
removing the width=320 from the meta tag and using that with Joe's
updateLayout code works a charm in all situations.

<meta name="viewport" content="user-scalable=false; initial-
scale=1.0; maximum-scale=1.0; minimum-scale=1.0" />

<script type="application/x-javascript">

addEventListener("load", function()
{
setTimeout(updateLayout, 10);
}, false);

var currentWidth = 0;

function updateLayout()
{
if (window.innerWidth != currentWidth)
{
currentWidth = window.innerWidth;
//document.getElementById('count').innerHTML = "[width = " +
currentWidth + "px]";

var orient = currentWidth == 320 ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
setTimeout(function()
{
window.scrollTo(0, 1);
}, 100);
}
}

setInterval(updateLayout, 400);

</script>

I hope this helps others, I was pulling my hair out for about 5
hours last night until I hit upon this.

Ciao,
ml

[craig]

On Aug 6, 9:17 pm, Mr Junk <j...@stuffthis.net> wrote:
> Cheers all,
>
> I found out how to fix this, finally.
>

Ah, that helps quite a bit, thanks. I changed my parameters to:

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

This basically ditches the width=320 and height=480 settings. I am
getting much better behavior now, with no un-intended zooming/scaling
when pages are reloaded from cache. This also prevents my interface,
which is natively sized to 320 wide, from being scaled up to 480 when
rotated to landscape mode. I didn't necessarily mind the scaling
before, but the interface graphics were getting slightly fuzzy when
scaled 150%. Now, the content stays scaled at a true 100% in
landscape and I get empty space for pixels 320 ≤ x ≤ 480. I think
this is much more consistent behavior for an app designed for portrait
layout.

Craig