I encountered a strange problem at work, and after struggling for a long time, I finally solved it. I will record the analysis ideas and solutions here.
The project is to build a responsive company official website. After the static image page was cut out in the early stage, it was submitted to the backend for use as a template, and I basically quit the project.
When the backend was implemented, I found that the page display on the mobile terminal was not quite right and looked very blurry. The first thought was that the head of meta was covered. After checking the source code, I found that it was covered.
This is the meta header I am used to using to make the page width adaptively change according to the device width.
<meta name=viewport content=width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no />
However, the back-end implementation framework is introduced directly according to the template, and some public resources even include the meta for setting the viewport. The backend is introduced like this:
<meta name=viewport id=viewport content=width=640px, user-scalable=no>
This header is appended by a js file that has to be added, and it is clearly informed that the js file cannot be modified! So this setting of a fixed width of 640px overwrites my original meta setting that changes with the device width!
The problem comes, the static page has been completed, and due to historical code factors, a considerable part of the code did not use rem units at the beginning, and it is no longer possible to modify the css effect on a large scale. Only by resetting the viewport width through js can it be overridden again... This is quite simple, but the code is quite ugly.
But another problem arises. This official website page also dynamically introduces iframe pages. These iframe pages have a fixed width of 640px. This is so devastating! If I add meta that changes with the device width, then these iframes cannot be viewed; if I don’t add meta again, then the official website itself cannot be viewed!
Fortunately, these iframes are introduced through a unified method. Although the js file of the introduction method cannot be changed, it is still possible to monitor again in the business code. So after binding the click event again and determining whether the iframe has been introduced, it is time to use some special methods!
CSS3 has a transform: scale() method that can scale elements. Although the actual width and height of the occupied space have not changed, the display effect is still good.
The corresponding scaling ratio can be obtained by calculating 缩放比例= 设备宽度/ 640 , and then setting transform: scale(缩放比例) on the introduced iframe to achieve beautiful scaling!
Is this the end of the matter? No! not yet! The iframe is scaled, but the height is also scaled, and the content is incompletely displayed. Setting height: 设备高度/ 缩放比例can restore the original iframe height.
Thought it was over? Not really! There are still problems! After the iframe layer is scaled by scale() attribute, it also moves a certain distance downward and to the right by default. This is because scale() scales according to the center by default! A lot of time was spent here to find suitable solutions, such as negative margin, translate(), etc. However, due to the difficulty in calculating the appropriate moving proportion coefficient, I am sorry for my poor algorithm. I tried this method for a long time and finally decided to give up.... ..
Looking through the css manual, I found a familiar yet unfamiliar attribute.
Set the base point position of the rotated element:
transform-origin: x-axis y-axis z-axis;
It has three attribute values, which respectively represent where the defined view is placed on the X, Y, and Z axes.
Meeting an old friend in a foreign land, meeting an old friend after a long drought! What I want is you! Set transform-origin: 0 top 0 solution~
Actually, this attribute has been used a long time ago, but what I first wrote was the abbreviation transform-origin: 0 , and after being parsed by the browser, it was transform-origin: 0 center 0 ... How I felt at the time That's it. I've been thinking about moving the iframe up, but I didn't know that other people have such a function, but I ignored it. I still can’t study in a hurry. I can waste half a day on one attribute. I’m probably not a qualified front-end... (Escape
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.