Let me try a simpler question than my last.
I have a document with
<meta name="viewport" content="width=device-width">
When I view this document on an iPhone in portrait-mode, the size of my window.innerWidth/Height is 320x356, as expected.
When I rotate the phone into landscape, I expect to get 480x208, but instead I get 320x179, scaled up (meaning my apparent font size has increased).
What do I do to make it so that when I rotate, I get a 480-wide viewport, and a font that is the same apparent size as before?
Setting initial-scale=1.0 doesn't do it unless I zoom out and hit reload after rotating.
Setting maximum-scale=1.0 makes it do what I expect, but disables pinch-zooming entirely, so that's no good.
I don't understand what -webkit-text-size-adjust:none is supposed to do, but it doesn't seem to be relevant here, and doesn't change anything.
You seem to being doing a lot of fancy ui development recently. I would recommend that you take a couple days and learn something like jquery or mootools or similar. A lot of your complaints about the hacks suggested to you have to do with supporting browsers that you don't want/don't know how to support, but if you stuck something like this into an existing library with a nice API, others would likely make the edge cases work. High level is good. I know you know this deep down. Stop trying to write bare javascript and accept libraries. Write a jquery plugin that does this, and let others worry about how to get IE6 or Blackberry's browser to work with it.
Fuck that. I'd rather actually understand how it works than have to chase some moving target library that gets CADT'd every 18 months.
Sure, understanding how it works is very important.
(With all due respect) As an innocent bystander, I witness you missing the boat on the value of higher level libraries in the web development world. Microsoft ships jquery as part of their webapp dev environment. It's not going to just be gone in 18 months. And, it's really nice.
I'm not suggesting that you spend a week digging through docs trying to figure out how to do *this exact* thing with $library. I'm suggesting that you find one that you like, and then when you run into these issues, you can either then dig up how to do what you want, or you can turn to that community, or you can turn to the js community and ask 'in bare js, how do I do $foo?'. In any case, you run into interesting challenges, and it would be great to have your solutions end up in a library that is actively worked on, rather than in some orphan function() on some obscure night club site.
Your mistake is in assuming that jwz posts here looking to solve his problems. This is an elaborate performance art piece about older techies who believe that Everything In The Last Decade is an Irrelevant Fad, and newbies who only know about Irrelevant Fads From The Last Decade.
Fuck, dude, forth wall! Have some respect.
jwz, have you tried using Javascript module pattern?
A 2nd on the suggestion you look at JQuery. It's remarkable for how it addresses the most glaring omissions in JavaScript for dealing with web pages. It really tries to fill in what's missing from the JS syntax and stay out of the way.
IMHO: JQuery is to JavaScript like ObjC is to C, vs Most JS Libraries are to JS like C++ is to C.
I'll third the jQuery suggestion. It's been around for a long time and it's getting better all the time. I don't really know Javascript and I avoid front end programming like the plague so I usually don't have to mess with any of it, but even I have no problem figuring out how to do something with jQuery in a pinch, and the rest of the team who actually know and are good with Javascript all swear by it too.
While JQuery is indeed very nice, Jamie has a CSS problem, not a Javascript problem.
Jamie has a "my CSS doesn't change to reflect dynamic document state" problem, which is, IIRC, exactly why JavaScript and the DOM were invented at some flash-in-the-pan company named Netscape some million internet years ago.
I am too lazy to do it, but I'll bet a dollar that the answer is < 100 bytes of JQuery.
To quote (paraphrase) the OP, "... and now you have two problems".
I don't suppose you can monitor any events being triggered, and see whether you get something when the screen rotates? If so, you could set maximum-scale temporarily, then turn it off (say) a half-second later.
Sigh. LJ Formatting ate my first post...
Dunno if you figured this out already, but I did some quick googling and found a couple of suggestions (caveat, I have not tried them! On the internets, we make YOU do all the work! :)
Apple apparently uses this for their own reader.mac.com site
<meta name = "Viewport" content = "maximum-scale=1.6,width=320" >
And someone else suggested this:
<meta name = "viewport" content = "maximum-scale=0.6667,width=480" >
The fonts will remain the same size in both portrait and landscape.
The width in portrait is 480 but the width in landscape is 720.
jQuery is apparently pretty cool though. :)
maximum-scale prevents pinch-zooming, so no solution involving that works.