Simbul/baker — Issue #184: Using matchmedia to test the orientation of the ipad
Author: k8fisher
Created: 2011-10-21 16:01:21+00:00
State: open

Hi
Im trying to create a publication which makes use of matchMedia to switch between portrait and landscape versions of pages. Im using matchMedia and listeners, along the lines of...

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);

function handleOrientationChange(mql) {
if (mql.matches) {
top.location.href="portraitVersion.html;"
} else {
top.location.href="landscapeVersion.html;"
}
}

I dont see any change in page layout when running this on an ipad, is there any reason why matchMedia isnt firing when the ipad is rotated? I need to use javascript rather than css to as the pages (jpgs) need to have imagemaps assigned to them.

Any thoughts on detecting orientation change and switching page very much welcome. Unfortunately I *have* to change web page rather than use css to stretch the jpg to fit the orientation :/

Kate