Questa è una soluzione piuttosto confusa, ma è almeno qualcosa (?). L'idea è di utilizzare una trasformazione CSS per ruotare i contenuti della pagina in modalità quasi verticale. Ecco il codice JavaScript (espresso in jQuery) per iniziare:
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
Il codice prevede che l'intero contenuto della tua pagina viva all'interno di un div all'interno dell'elemento body. Ruota quel div di 90 gradi in modalità orizzontale, tornando al ritratto.
Lasciato come esercizio al lettore: il div ruota attorno al suo punto centrale, quindi probabilmente la sua posizione dovrà essere regolata a meno che non sia perfettamente quadrata.
Inoltre, c'è un problema visivo poco attraente. Quando cambi orientamento, Safari ruota lentamente, quindi il div di livello superiore scatta a 90 gradi diversi. Per un divertimento ancora maggiore, aggiungi
body > div { -webkit-transition: all 1s ease-in-out; }
al tuo CSS. Quando il dispositivo ruota, quindi Safari, quindi il contenuto della tua pagina. Beguiling!