1489 sujets

Web Mobile et responsive web design

Mode paysage = zoom

Bonjour,
poster ce message dans un sujet "résolu" était sûrement une mauvaise idée, je le reposte donc ici si j'ai le droit Smiley smile
Malgré des tentatives avec height/width/scale de la balise viewport, je rencontre un problème avec le passage en mode paysage. Si je charge le site en mode paysage, tout
va bien. Mais si je change l'orientation en portrait puis de nouveau en paysage, alors il zoome…

J'ai essayé d'ajouter le JS suivant lors du changement d'orientation mais ça ne résout rien, au contraire.
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=1.0');


URL d'exemple :
http://www.parisdigest.com/menus/mobile.htm

Merci d'avance !
Bonjour , voici une solution pure css
/* iPhone */
@media only screen and (width:320px) and (device-width:320px) and (device-height:480px) and (orientation: landscape) {
	body {
		-webkit-transform: scale(0.667);
		-webkit-transform-origin: top right;
		position: absolute;
		right: 0;
		top: 0;
		width: 480px;
	}
}
/* iPad */
@media only screen and (width:768px) and (device-width:768px) and (device-height:1024px) and (orientation: landscape) {
	body {
		-webkit-transform: scale(0.75);
		-webkit-transform-origin: top right;
		position: absolute;
		right: 0;
		top: 0;
		width: 1024px;
	}
}

Une autre avec javascript 

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
Sujet clos
Aller à