iPad上基于百分比的CSS布局中断

Question

I'm trying to code a site to a customer's specifications. What I have now seems to be working perfectly on OSX Safari, Firefox, and Chrome. Untested on PC. Breaks quickly on iPad. And is completely borked on iPhone.

Here's where I'm at now: http://geofkern.com/14v0.1/jewelrySeries.html

Every element is percentage sized to the height of the window because the client is used to flash sites that scale to window size and wants his images to display as large as possible. On iPad iff I open the page in landscape mode, and click the menu button immediately, the menu pops up, and everything is displayed at the proper size. But once I scroll, reload, or try to view in portrait orientation, the menu button stops working or nothing displays at the right size (if it's even still visible). I've tried changing viewport meta settings but no combination seems to work. I'd love to leave it scalable, but the percentage based sizes seem to go wonky at any scale other than 1.0.

Is there something obvious that I'm missing here? Is there a better way to be doing this? Does anyone see why my page is displaying so erratically on mobile devices?

Answer 1

So it looks like the biggest problem is that viewport relative units aren't yet supported by iOS. Changed them all back to % units, and most of my issues have cleared up. Still isn't quite behaving like on desktop, but at least it's no longer "completely borked".