Use css3 to scale the browser

Author: Jiang Yujie (hfahe)

Copyright statement: original works. You are welcome to reprint them. During reprinting, you must mark the original source, author information, and this statement in hyperlink form.

 

Css3 provides powerful transform attributes for animation effects. Next I will introduce how to use css3 to scale the browser.

HTML page

First, we need to write a simple page to test the code for page scaling.

There are two buttons on the page. One is to zoom in, the other is to zoom in, and the other is to zoom out.

JavaScript code

You can use transform: scale to set the scale of the body to scale the entire page. The JS Code is as follows:

VaR size = 1.0; </P> <p> function zoomout () {<br/> size = size + 0.1; </P> <p> set (); <br/>}</P> <p> function zoomin () {<br/> size = size-0.1; </P> <p> set (); <br/>}</P> <p> function set () {<br/> document.body.style.css text = document.body.style.css text + ';-WebKit-transform: scale ('+ size +'); '; <br/>} 

Shows the scaling effect:

This effect is similar to that of chrome, but it is somewhat different from our expectation: The current scaling is based on the center of the DIV, and we want the scaling to be based on the origin in the upper left corner, how should we solve this problem?

Css3 also has an attribute called transform-origin, which is used to set the start point of transform. The default value is the midpoint of the element. We need to set it to the upper left corner to meet the requirements. The code for modifying style settings is as follows:

Document.body.style.css text = document.body.style.css text + ';-WebKit-transform: Scale (' + size + ');-WebKit-transform-origin: 0 0 ;'; 

The new results are as follows:

Combined with browsers

Chrome plug-ins are actually simple, and the preceding script is directly inserted in background.html for calling.

To implement the native functions of the browser, run the above JS script directly in the executejavascript method of cefframe.

Using the above method, we can use js to implement many functions in the browser, such as slice rotation and page font setting.