-
iframe landescape bug
Buongiorno sto riscontrando un problema con iframe in quanto quando la pagina entra in landescape l'iframe non si ridimensiona come dovrebbe mantenendo l'altezza superiore allo schermo ho provato a sistemare la situazione con jquery reimpostando la dimensione dello schermo quando di verifica l'evento orientationchange ma niente è come se invece che darmi la possibilità di scrollare lui impostasse la dimenzione del frame quanto il contenuto potete aiutarmi? ecco lo script che sto utilizzando.
nel frame ho inserito la pagina del fatto quotidiano per dimostrare che non dipende dal contenuto.
Codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<title>prova</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/*
Ipostazioni se cambia l'orientamento del monitor da smartphone o tablet alert(event.orientation + screen);
*/
if( jQuery(window).width() < 1000 ){
// Rileva se il dispositivo supporta l'evento orientationchange, altrimenti ricade su
// l'evento di ridimensionamento.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
//alert('valore window rotation:' + window.orientation + " " + screen.width);
if( window.orientation == 0 ){
var schermoHp = jQuery(window).height() ;
jQuery('#frame-arte').css({'height': schermoHp + 'px', 'top':'0', 'bottom':'auto' });
//jQuery('#frame-arte').animate({height: schermoH + 'px' });
}
else{
alert('valore window rotation:' + window.orientation + " " + screen.width);
var schermoHl = jQuery(window).height()/100 ;
jQuery('#frame-arte').css('height', schermoHl*100);
jQuery('#frame-arte').animate({height: schermoHl*100});
}
}, false);
}
});
</script>
</head>
<body>
<iframe src="https://www.ilfattoquotidiano.it/?refresh_ce" id="frame-arte"style="width:100%;height:100vh;position:fixed;top:0;left:0;z-index:10;border:2px solid green;overflow:scroll;">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Grazie a tutti per l'attenzione
P.S.: tengo a specificare che il problema si verifica solo da smartphone e tablet non da desktop
