To dość hakerskie rozwiązanie, ale przynajmniej coś (?). Chodzi o to, aby użyć transformacji CSS, aby obrócić zawartość strony do trybu quasi-portretu. Oto kod JavaScript (wyrażony w jQuery) na początek:
$(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);
});
Kod oczekuje, że cała zawartość Twojej strony będzie znajdować się w elemencie div bezpośrednio w elemencie body. Obraca ten obszar o 90 stopni w trybie poziomym - z powrotem do portretu.
Pozostawione jako ćwiczenie dla czytelnika: element div obraca się wokół swojego punktu środkowego, więc jego położenie prawdopodobnie będzie wymagało dostosowania, chyba że jest idealnie kwadratowe.
Jest też nieatrakcyjny problem wizualny. Gdy zmienisz orientację, Safari obraca się powoli, a następnie element div najwyższego poziomu przyciąga do 90 stopni inaczej. Aby uzyskać jeszcze więcej zabawy, dodaj
body > div { -webkit-transition: all 1s ease-in-out; }
do twojego CSS. Gdy urządzenie się obraca, to robi to Safari, a potem zawartość Twojej strony. Niesamowite!