Récemment, j'ai écrit une page mobile au travail. Ce n'était rien au début, mais il y avait une exigence qui me semblait très étrange. La page que j'ai écrite devait être placée dans une APP, mais l'APP était là. orientation paysage. , la vue Web qui ouvre cette page est également en écran horizontal (la dernière version de l'application s'ouvre en vue Web à écran vertical), à l'origine, nous avons utilisé la disposition rem, et il n'y a pas de problème dans l'état d'écran horizontal, mais Party A espère utiliser l'écran horizontal dans l'écran horizontal. Forcer cette page à s'afficher verticalement lorsque l'écran est ouvert. On a donc la série d'opérations suivante.
La première consiste à déterminer l’état de l’écran horizontal, à l’aide du code suivant :
function orient() { if(window.orientation == 90 || window.orientation == -90) {//écran horizontal//ipad, écran vertical iphone//$(body).attr(class, paysage); //orientation = 'paysage'; //alerte (écran vertical pour iPad, écran horizontal pour Android); $(p).text(écran horizontal); == 0 || window.orientation == 180) {//Écran vertical//ipad, écran horizontal iphone ; écran vertical Android// $(body).attr(class, portrait);// orientation = 'portrait'; //alerte (écran horizontal iPad, iPhone ; écran vertical Andriod); $(p).text(écran vertical ; return false ; } } //Appelé lors du chargement de la page $(function() { orient(); }); //Appelé lorsque l'utilisateur change l'orientation de l'écran $(window).on('orientationchange', function(e) { orient(); });Il s'agit de surveiller la direction du téléphone mobile. Cependant, comme l'APP est ouverte horizontalement, il est généralement impossible de le détecter, et une condition préalable pour cela est que la rotation automatique du téléphone soit activée. La méthode ci-dessus a donc été abandonnée.
Depuis que la méthode intelligente a été abandonnée, la méthode la moins chère consiste à surveiller la largeur et la hauteur de l’écran. Lorsque la hauteur est supérieure à la largeur, nous passons par défaut à l'état d'écran vertical du téléphone. Lorsque la largeur est supérieure à la hauteur, nous considérons que le téléphone est dans l'état d'écran horizontal. (Bien sûr, cela a aussi des limites, mais étant donné que la nouvelle APP a résolu le problème des écrans horizontaux et verticaux, nous le ferons ici). Nous n’avons rien à faire lorsque l’écran est en mode portrait. Mais en mode paysage, il faut faire pivoter la page de 90 degrés. Sans plus attendre, regardons directement le code :
//Utilisez la rotation CSS3 pour faire pivoter le conteneur racine de 90 degrés dans le sens inverse des aiguilles d'une montre pour forcer l'utilisateur à l'afficher verticalement var detectorOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style = if(width <= ; height) { // Écran horizontal // style += width: + width + px;; // Faites attention au changement de largeur et de hauteur après la rotation // style += height: + height + px;;// style += -webkit- transform : rotation(0); transformation : rotation(0);;// style += -webkit-transform-origin : 0 0;;// style += transformation-origine : 0 0;; taille de police : + (largeur * 100 / 1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = font-size: + (largeur * 100 / 1125) + px } else { // Style vertical + = largeur : + hauteur + px ;; style += hauteur min : + largeur + px ;; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);; // Faites attention à la gestion du style du point médian de rotation += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; style += transformation-origine : + hauteur / 2 + px + (hauteur / 2) + px;; //style += taille de police : + hauteur * 100 / 1125 + px;; //$(html).css({font-size:(height * 100 / 1125),overflow-y:hidden}); var html_doc = document.getElementsByTagName(html)[0]; style.cssText = taille de police : + hauteur * 100 / 1125 + px + ; overflow-y:+hidden;+height:+height+px;; style += overflow-y: caché;; $wrapper.style.cssText = style; } }window.onresize = detectOrient;detectOrient() ;function add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left); :auto,haut:0,largeur:11,25rem,hauteur:1,77rem})}Je pense que ce code n'est pas difficile pour le personnel de première ligne, mais il y a trois points à noter.
Premier point :
Au début, j'ai fait pivoter directement l'intégralité du code HTML pour plus de commodité. À ce stade, il y aura un problème, c'est-à-dire que le positionnement des éléments positionnés de manière fixe dans la page ne fonctionnera pas (le <footer> dans le code est placé comme un pied de page). switch. bottom); nous devons changer cela. Puisque la rotation de l'élément parent ne fonctionnera pas sur les éléments enfants, nous n'avons pas besoin de faire pivoter l'élément parent, il suffit de faire pivoter ses éléments frères directement. Ici, je fais tourner un élément appelé #vue, car tout le reste du contenu de ma page se trouve dans ce div. J'ai donc juste fait pivoter l'élément. Ensuite, le positionnement peut être utilisé à ce moment-là, mais le style est faux, donc dans ma fonction add_tab, j'ajuste la taille et le style de cet élément pour qu'il puisse être affiché normalement sur le côté droit de l'écran, c'est-à-dire en portrait mode , en bas de l’écran.
Deuxième point :
La deuxième chose à noter est que parce que j'utilise la mise en page rem, je vais changer la taille de la police du code HTML, mais soyez prudent à ce moment-là. Lorsque nous le faisons pivoter, la largeur devient hauteur et la hauteur devient largeur, donc nous. vous devez utiliser la hauteur pour calculer la taille de la police du répertoire racine.
Le troisième point :
Le troisième point est noté dans le programme. Nous devons faire attention au centre de rotation. Le centre de rotation par défaut est le point central de l'élément sélectionné. Nous voulons maintenant changer le point central de rotation. Après la rotation, vous devez également overflow-y:hidden le code HTML. Sinon, il y aura un défilement inutile.
Dans ce cas, la page entière est essentiellement tournée et les éléments positionnés fixes en bas sont à nouveau positionnés avec succès. Heureusement, la fenêtre pop-up que nous utilisons est la fenêtre pop-up de layui, et nous pouvons ensuite faire pivoter la fenêtre pop-up de 90 degrés.
ps : Enfin, j'ai trouvé un problème qui ne peut pas être résolu Lorsque la page est suffisamment longue, c'est-à-dire lorsqu'il y a une barre de défilement, après la sortie de la fenêtre pop-up, si vous faites glisser le calque de masque derrière elle, le suivant. les pages glisseront vers le haut. Cela aurait pu être résolu à l'origine. L'article ci-dessus a été résolu en utilisant un positionnement fixe, mais à cause de la rotation, cela a échoué, il n'y a donc pas de bonne solution. Il n'y a aucun problème en mode portrait.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.