Para montar um layout personalizados para iPhone e iPad o programador HTML precisa ficar atento a alguns detalhes importantes, como a orientação, mesmo tendo um recurso do CSS muitas vezes precisamos que as funções JavaScript se comportem de forma diferente para cada orientação.
Primeiro vá ao body do seu HTML e coloque atribua uma função ao evento ‘onorientationchange’
<body onorientationchange="updateOrientation();">
Logo em seguida adicione ao seu JavaScript a seguinte função
function updateOrientation(){
if (window.orientation == 90 || window.orientation == -90) {
document.body.className = 'landscape';
} else {
document.body.className = 'portrait';
}
}
Pronto, agora basta antes de executar uma função verificar qual a classe do body, também achei esse recuso melhor do que verificar com o CSS por que ele teve um desempenho bem melhor no CSS, deixando as classes com herança e dando um resultado bem mais agradável.
