Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Using matchmedia to test the orientation of the ipad #184

k8fisher opened this Issue · 6 comments

2 participants


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)");



function handleOrientationChange(mql) {

if (mql.matches) {

} else {



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 :/



I don't know matchMedia so I can't really tell, however... if you are going to the extent of creating two pages, why don't you put BOTH the image maps on the page and use CSS to show / hide them? This will result in only one page with both and probably will spare you also time to manage only one page. :)


yeah that was my first thought but having two layers 768x1024 and 1024x1488 in one html page causes the body of the page to stay at 1024x1488 (so when the portrit version of the page is showing youve scroll bars and white space where the larger layer is sitting "hidden". Not sure if thats a ipad only situation or universally true but it pushed me to look at creating two seperate pages.

What method dyou use to check orientation / a change in the orientation?

@k8fisher k8fisher closed this
@k8fisher k8fisher reopened this

Check the latest demo book: the CSS there should be correctly working for portrait and landscape.

However, it's strange, because items with display: none; shouldn't count for the page size. Did you try that or were you using some other CSS? :)


aah i set visibility:hidden and set the height of the layer to 0px I will definitely try display:none; and will check out the demo book. Thank you for your super speedy response.


Heck! thank you that worked perfectly.


Wonderful :)

The difference is that visibility keeps the item on the page, just hides it, while display removes it from the page entirely. :)

@folletto folletto closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.