Ho bisogno della larghezza della finestra per una pagina di 950px in orizzontale e 630px in verticale. Queste larghezze di pixel sono sfortunatamente inflessibili.Come adattarsi allo schermo dopo aver cambiato la larghezza della vista sul cambio di orientamento?
Sto regolando la larghezza del contenuto DOM in base all'orientamento utilizzando le query multimediali CSS.
Sto ascoltando gli eventi di modifica dell'orientamento in JS per ridimensionare il viewport sul cambio di orientamento.
Tutto sembra buono sul caricamento iniziale della pagina (verticale o orizzontale).
Tuttavia, dopo un cambio di orientamento, Safari Safari conserva l'impostazione della scala precedente, invece di adattare la finestra sullo schermo. Un doppio tocco o due lo raddrizza. Ma ho bisogno che sia automatico.
Ho allegato la fonte di seguito e l'ho caricata su una demo URL.
Di seguito vengono catturate schermate scattate dopo i cambi di orientamento: da orizzontale a verticale e da verticale a orizzontale.
Come posso forzare Safari a impostare automaticamente la larghezza della finestra sullo schermo? O sto andando tutto sbagliato?
La modifica delle varie impostazioni della scala nella finestra non ha aiutato. L'impostazione maximum-scale=1.0 o initial-scale=1.0 sembra ignorare il mio width, l'impostazione width a device-width (ad esempio 1024 o 768 sul mio iPad 2), lasciando spazio margine morto. L'impostazione minimum-scale=1.0 sembra non fare nulla.
<!DOCTYPE html>
<html>
<head>
<title>iPad orientation</title>
<meta name="viewport" content="user-scalable=yes">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">;
/**
* update viewport width on orientation change
*/
function adapt_to_orientation() {
// determine new screen_width
var screen_width;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
screen_width = 630;
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
screen_width = 950;
}
// resize meta viewport
$('meta[name=viewport]').attr('content', 'width='+screen_width);
}
$(document).ready(function() {
// bind to handler
$('body').bind('orientationchange', adapt_to_orientation);
// call now
adapt_to_orientation();
});
</script>
<style type="text/css" media="screen">
body {
margin: 0;
}
#block {
background-color: #333;
color: #fff;
font-size: 128px;
/* landscape */
width: 950px;
}
#block .right {
float: right
}
@media only screen and (orientation:portrait) {
#block {
width: 630px;
}
}
</style>
</head>
<body>
<div id="block">
<div class="right">→</div>
<div class="left">←</div>
</div>
</body>
</html>
Anche io posso confermare quanto sopra ha risultati meravigliosi su un iPad (maggio 2013) – Richard
Ovviamente aumenta la larghezza su molti altri dispositivi. Quindi non è davvero una buona soluzione. Ma c'è finalmente qualcosa su cui lavorare :-) –
+1 per il concetto. Bello. –