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
On Aug 5, 2007, at 2:57 AM, Mr Junk wrote:
>
> 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
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---
