J'ai rencontré un problème étrange au travail. Après avoir lutté pendant longtemps, je l'ai finalement résolu. Ici, j'enregistre les idées d'analyse et les solutions.
Le projet consiste à créer un site Web officiel d'entreprise réactif. Après avoir découpé la page d'image statique au début, elle a été soumise au backend pour être utilisée comme modèle, et j'ai pratiquement quitté le projet.
Lorsque le backend a été implémenté, j'ai constaté que l'affichage de la page sur le terminal mobile n'était pas tout à fait correct et semblait très flou. La première pensée a été que la tête de la méta était couverte. Après avoir vérifié le code source, j'ai découvert qu'elle était couverte.
Il s'agit du méta-en-tête que j'ai l'habitude d'utiliser pour modifier la largeur de la page de manière adaptative en fonction de la largeur de l'appareil.
<meta name=viewport content=width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no />
Cependant, le cadre d'implémentation back-end est introduit directement selon le modèle, et certaines ressources publiques incluent même la méta pour définir la fenêtre d'affichage. Le backend est présenté comme ceci :
<meta name=viewport id=viewport content=width=640px, user-scalable=no>
Cet en-tête est annexé par un fichier js qui doit être ajouté, et il est clairement indiqué que le fichier js ne peut pas être modifié ! Ainsi, ce paramètre d'une largeur fixe de 640 pixels écrase mon méta-paramètre d'origine qui change avec la largeur de l'appareil !
Le problème vient, la page statique est terminée, et en raison de facteurs historiques du code, une partie considérable du code n'utilisait pas d'unités rem au début, et il n'est plus possible de modifier l'effet css à grande échelle. Ce n'est qu'en réinitialisant la largeur de la fenêtre via js qu'elle peut être à nouveau remplacée... C'est assez simple, mais le code est assez moche.
Mais un autre problème se pose. Cette page du site officiel introduit également dynamiquement les pages iframe. Ces pages iframe ont une largeur fixe de 640 pixels. C'est tellement dévastateur ! Si j'ajoute des méta qui changent avec la largeur de l'appareil, alors ces iframes ne peuvent pas être visualisées ; si je n'ajoute pas de méta à nouveau, alors le site officiel lui-même ne peut pas être consulté !
Heureusement, ces iframes sont introduites via une méthode unifiée. Bien que le fichier js de la méthode d'introduction ne puisse pas être modifié, il est toujours possible de le surveiller à nouveau dans le code métier. Ainsi, après avoir à nouveau lié l'événement click et déterminé si l'iframe a été introduit, il est temps d'utiliser des méthodes spéciales !
CSS3 a une méthode transform: scale() qui peut mettre à l'échelle les éléments. Bien que la largeur et la hauteur réelles de l'espace occupé n'aient pas changé, l'effet d'affichage est toujours bon.
Le rapport de mise à l'échelle correspondant peut être obtenu en calculant 缩放比例= 设备宽度/ 640 , puis en définissant transform: scale(缩放比例) sur l'iframe introduite pour obtenir une belle mise à l'échelle !
Est-ce la fin de l'affaire ? Non! pas encore! L'iframe est mise à l'échelle, mais la hauteur est également mise à l'échelle et le contenu n'est pas complètement affiché. Définir height: 设备高度/ 缩放比例peut restaurer la hauteur iframe d'origine.
Vous pensiez que c'était fini ? Pas vraiment! Il y a encore des problèmes ! Une fois que le calque iframe est mis à l'échelle par scale() , il se déplace également d'une certaine distance vers le bas et vers la droite par défaut. En effet, scale() évolue en fonction du centre par défaut ! Beaucoup de temps a été passé ici pour trouver des solutions appropriées, telles que la marge négative, traduire(), etc. Cependant, en raison de la difficulté de calculer le coefficient de proportion mobile approprié, je suis désolé pour mon mauvais algorithme pour lequel j'ai essayé cette méthode. longtemps et j'ai finalement décidé d'abandonner.... ..
En parcourant le manuel CSS, j'ai trouvé un attribut familier mais inconnu.
Définissez la position du point de base de l'élément pivoté :
origine de la transformation : axe des x, axe des y, axe des z ;
Il possède trois valeurs d'attribut, qui représentent respectivement l'endroit où la vue définie est placée sur les axes X, Y et Z.
Rencontrer un vieil ami dans un pays étranger, retrouver un vieil ami après une longue sécheresse ! Ce que je veux, c'est toi ! Définir transform-origin: 0 top 0 solution ~
En fait, cet attribut a été utilisé il y a longtemps, mais ce que j'ai écrit pour la première fois était l'abréviation transform-origin: 0 , et après avoir été analysé par le navigateur, c'était transform-origin: 0 center 0 ... Ce que j'ai ressenti à le moment où ça y est, j'ai pensé à déplacer l'iframe vers le haut, mais je ne savais pas que d'autres personnes avaient une telle fonction, mais je l'ai ignoré. Je ne peux toujours pas étudier à la hâte. Je peux perdre une demi-journée sur un seul attribut. Je ne suis probablement pas un front-end qualifié... (évasion.
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.