Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the iframe tag in html5 to achieve zoom effect on the mobile side, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

The project is a responsive company's official website, after the early static map page is cut, it is submitted to the background as a template to use, I also basically quit the project.

When landing on the backend, it is found that the display on the mobile page is not quite right and appears to be very blurry. The first idea is that the head of meta is covered, and if you look at the source code, you will find that it is covered.

This is my accustomed meta header, which adapts the page width to the width of the device.

However, the backend landing framework is introduced directly according to the template, and some public resources actually include the meta for setting viewport. The backend introduces something like this:

This header is append entered by a js file that has to be added, and is explicitly told that the js file cannot be modified! So this set width to a fixed 640px overrides the meta that I originally set to change with the device width!

The problem is that 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, so it is no longer possible to modify the css effect on a large scale. It can only be overridden again by setting the viewport width through js reset. It's pretty simple, it's just that the code is pretty ugly.

But there is another problem, this official website page also dynamically introduces iframe pages, these iframe pages are fixed 640px width. This is crazy! I added mata that varies with the width of the device, so these iframe can't be viewed; if I don't add meta again, then the official website itself can't read it!

Fortunately, these iframe are introduced through a unified approach, and although you cannot change the js file of the incoming method, it is OK to listen again in the business code. So after binding the click event again to determine whether iframe has been introduced, it's time to use some special methods!

Css3 has a transform: scale () method that can scale elements, although the width and height of the real occupancy has not changed, but the display effect is still good.

By calculating the zoom ratio = device width / 640, you can get the corresponding zoom ratio, and then set transform: scale (zoom ratio) to the introduced iframe to achieve beautiful scaling!

Is this the end of the matter? No, no! No, not yet! The iframe is scaled, but the height is also scaled, and the content is not complete. Set height here: the device height / zoom ratio can restore the original iframe height.

Think it's over? No! There's still a problem! After the iframe layer is scaled by the scale () attribute, it also moves down and right by default, because scale () is scaled to the center by default! It took a lot of time to find a suitable solution, such as negative margin, translate (), etc., but because it is difficult to calculate the appropriate moving ratio coefficient, I have tried this method for a long time and finally decided to give up.

Look through the css manual and find a familiar and unfamiliar attribute.

Set the base point position of the rotated element:

Transform-origin: x-axis y-axis z-axis

It has three property values that represent where the definition view is placed on the X, Y, and Z axes.

It is known from other places that there will be showers after a long drought! What I want is you! Set transform-origin: 0 top 0 to solve ~

In fact, this attribute was used a long time ago, but I first wrote the abbreviation transform-origin: 0, and after it was parsed by the browser, it was transform-origin: 0 center 0. At that time, the feeling was solved around, and all I had been thinking about was to move the iframe up, but I didn't realize that other people had such a function, but I ignored it.

Thank you for reading this article carefully. I hope the article "how to use iframe tags in html5 to achieve scaling effect on mobile" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.