jQuery Girl
  1. jQuery Girl
  3. Android 2.3 Stock Browser: Inline-block n’étend pas sur l’événement “orientationchange”
Intereting Posts
jKey Erreurs du plug-in jQuery dans IE6 / 7, tentative d’exécution chaque fois qu’une touche non utilisée est enfoncée Comment combattre? Comment créer un appel de fonction universel pour valider et réinitialiser jQuery Une requête Http Post avec le type de contenu application / x-www-form-urlencoded ne fonctionne pas au spring Utiliser la variable dans le sélecteur jQuery L’entrée déclenche un événement de frappe au clavier deux fois jQuery: formulaire HTML 5 non valide avec l’élément select requirejs Ajouter l’atsortingbut alt au titre du diaporama? Pourquoi la ligne n’est-elle pas affichée dans les graphiques en haut? mettre à jour le marqueur après avoir retiré les marqueurs du tableau Erreur ‘Access-Control-Allow-Origin’ dans un appel recaptcha Comment lancer un événement JavaScript ou jQuery lorsque j’atteins le haut de ma page? Comment supprimer de manière récursive des objects nesteds contenant un tableau vide? jQuery détectant les cookies activés Récupère les valeurs de toutes les entrées de même classe qu’un tableau Comment obtenir l’instance totale du sélecteur: includes ()

Android 2.3 Stock Browser: Inline-block n’étend pas sur l’événement “orientationchange”

J’ai actuellement un problème intéressant avec mon site Web en ce qui concerne les changements d’orientation sur Android 2.3. C’est ssortingctement pour mobile, avec le support nécessaire pour Android 2.3+ navigateur de stock. Voir ci-dessous..

HTML:

CSS: 

 #wrapper { text-align: center; } #parent { display: inline-block; text-align; left; } .dummy { display: block; height: 0; }

JQuery: 

 $(window).resize(function () { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ $("#parent > .dummy").remove(); var currentOffset = $("#parent > #child:first-child").offset().top; $("#parent > #child").each(function() { if (currentOffset != $(this).offset().top) { $("
").insertBefore(this); currentOffset = $(this).prev().offset().top; } }); }, 500); }); $(window).bind("orientationchange", function() { $(window).resize(); });

Fondamentalement, le code parent ci-dessus contient un tas de divs inline-block . le wrapper centre le parent et toute division enfant qui passe à la ligne suivante laisse le parent aligné. Cela fonctionne comme prévu.

Le problème que je rencontre avec cette configuration est que lorsqu’un enfant passe à la ligne suivante, il y a une bonne quantité d’espace blanc à droite du parent.

J’ai écrit cette fonction jquery qui regarde d’abord chaque div enfant. Lorsqu’il détecte qu’un enfant a été encapsulé, il ajoute un élément

juste avant lui-même, ce qui crée un “saut de ligne”. Cela supprime l’espace blanc du côté droit dans le parent, repositionnant ainsi le parent au centre même de la vue. Cette fonction est appelée lors de l’événement ” orientationchange “, supprimant toutes les div factices trouvées auparavant.

Maintenant, mon problème – Sur le navigateur Android 2.3, le passage du mode portrait au mode paysage ne permet pas d’élargir la largeur du parent au-delà de la largeur de ce qu’il est en mode portrait. Évidemment, si je charge la page pour la première fois en mode paysage, le rendu est correct, mais le second passage en portrait, puis en paysage, le problème réapparaît.

Désolé, cela prend du temps, mais je souhaite vraiment trouver une solution à ce problème. J’ai essayé beaucoup de choses, même en définissant la largeur maximale du parent sur une valeur élevée codée en dur, mais pas de dés.

Merci pour l’aide de tous à l’avance!