Hauteur incorrecte sur l'iPhone

Question

Un problème d'affichage a été signalé sur l'iPhone. Je n'en ai pas. Je me demandais si quelqu'un avait des idées.

Sur mon site web. Le problème semble être causé par la barre d'URL. Sur Android, la fonction $(window).height() renvoie (hauteur d'écran - barre d'adresse). Sur iOS, cela ne semble pas être le cas.

Sur mon site, je passe la page en dessous de la barre d'adresse. Je fais ensuite les images en plein écran et centrées. (Je dois utiliser Javascript en raison de certaines restrictions de spécification)

Dans Android, les images sont redimensionnées dans la zone visible de l'écran. Sur l'iPhone, ils sont redimensionnés à la hauteur disponible - barre d'URL. Cela provoque les images à être trop petit avec un écart au fond. Au moins c'est ma compréhension du problème.

Captures d'écran iPhone.

avec la barre url

sans la barre url

C'est ce que je me sers pour redimensionner les images.

window.scrollTo(0, 1); 
function setImageSize() { 
    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    $('.photo-slide img').each(function() { 
     var width = $(this).attr('data-width'); 
     var height = $(this).attr('data-height'); 

     if (width > windowWidth) { 
      var ratio = windowWidth/width; 
      width = windowWidth; 
      height = height * ratio; 
     } 

     if (height > windowHeight) { 
      var ratio = windowHeight/height; 
      height = windowHeight; 
      width = width * ratio; 
     } 

     var marginTop = 0; 
     var marginLeft = 0; 

     if (windowHeight > height) { 
      marginTop = (windowHeight - height)/2; 
     } 
     if (windowWidth > width) { 
      marginLeft = (windowWidth - width)/2; 
     } 

     $(this).css({ 
      'margin-left':marginLeft+'px', 
      'margin-top':marginTop+'px', 
      'width':width+'px', 
      'height':height+'px' 
     }) 
    }) 
} 

Est-ce que quelqu'un a rencontré cela avant? Comment puis-je résoudre ce problème afin que l'image remplisse l'écran lorsque la barre d'URL n'est pas visible.

Answer 1

Si vous appelez setImageSize() dans un ensemble setTimeout à quelque chose comme 100 millisecondes, l'iPhone vous donne-t-il la hauteur d'écran correcte? Je me souviens que c'était un problème il y a un certain temps.

Vous ne pouvez pas non plus utiliser window.navigator.userAgent.indexOf ('iPhone') pour vérifier s'il s'agit d'un iPhone, puis ajouter la hauteur de la barre d'URL à la hauteur de l'image?