Working on a project where images need to get display as big as possible, fitting into the Window. I can't just use max-width/height: 100% as that wouldn't take the fixed header into account. I tried calculating the available height via $(window).height(), substracting the header size and setting that as the height of the image container element. That works, but ends up wasting a good 60px in iOS/Mobile Safari due to the addressbar staying visible.
It looks like the window height increases once you scroll down enough to trigger Safari to hide the addressbar. Not sure though - I tried inserting a large div before calculating the window size, and removing that afterwards; didn't quite produce the desired result. Have to figure out how to debug that on the device.
Any ideas how to layout this?