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.
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.
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.