I have an HTML element that is exactly 1000px wide and 850px high (it’s actually an iFrame containing an HTML5 game on a canvas tag, but I’m hoping that won’t matter).
I want the element presented on a tablet so that the viewport scales to always show the whole element, and nothing more. So when the tablet is held in landscape mode, you would expect blank space either side; while in portrait mode there would be blank space below (and above?).
In testing on an iPad2, the portrait mode seems to work out of the box, with the viewport automatically putting the element at the top and zooming to show exactly the whole image; but in landscape mode it’s doing the same thing and cutting off the bottom.
I’ve tried all sorts of combinations of the viewport meta tag, e.g. <meta name="viewport" content="height=850"/>, but can’t seem to get it to work consistently.
A solution using jQuery to resize based on changes in the window size would be welcome.
The iPad viewport size is 1024 x 690 px in landscape mode and 768 x 946 px in portrait mode.
if you set the initial-scale & maximum-scale property of the viewport meta tag to 0.768 it will fit exactely in portrait mode still won’t be cutoff in landscape mode.