How to Zoom into a Web Page Like Ie or Firefox Do, Using Programming

Can I zoom into a web page like IE or Firefox do, using programming?

There is a zoom CSS property, but it is part of CSS3 and is most likely not widely supported. By setting this on the body element using JavaScript you can zoom the entire page.

I would agree with the sentiments of the answers to the question you linked to though in that it should be up to the user to choose their own zoom settings. If your site is too big/small to see, it indicates a problem with your site design.

Setting IE Optical Zoom feature using Javascript/CSS

If this is your users Choice, leave it to their browsers most mature Browsers us a zoom that magnifies their page rendering (IE 7&8, Opera, FireFox, Chrome 2.0, Safari?). Besides depending on which system(screen resolution) your users are coming from will dictate their zoom choice. Unfortunately each browser handles remembering your zoom setting a little different for instance chrome remembers per site while ie is a global setting for each new tab/window.

Zoom In My Website By 10%

The correct way to do this is to redesign your website. If you have designed correctly, this should be very easy. Some advice:

• Page width: Increase the width of your outermost container, child element widths should expand to fill the space unless you have hardcoded absolute widths set. In those cases, adjust the px to accommodate.

• Font size: If you have used em or % values, just increase the font-size of body (the other elements will inherit this base font size). If you have used px for font sizes, you'll have to increase them.

I think you know deep down that "zooming" the page via javascript or the IE zoom property isn't the right approach and you are avoiding the redesign. Even something like body{ transform:scale(1.1); } is going to make your images look bad when they scale/stretch, and since it's CSS3 the support will be lacking, and after testing this idea it appears to be able to scale content out of the viewport/visible area.

The right way to do it if you want this to be permanent change is to rewrite your CSS.

Zoom in on a point (using scale and translate)

Finally solved it:

const zoomIntensity = 0.2;

const canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
const width = 600;
const height = 200;

let scale = 1;
let originx = 0;
let originy = 0;
let visibleWidth = width;
let visibleHeight = height;

function draw(){
    // Clear screen to white.
    context.fillStyle = "white";
    context.fillRect(originx, originy, width/scale, height/scale);
    // Draw the black square.
    context.fillStyle = "black";
    context.fillRect(50, 50, 100, 100);

    // Schedule the redraw for the next display refresh.
    window.requestAnimationFrame(draw);
}
// Begin the animation loop.
draw();

canvas.onwheel = function (event){
    event.preventDefault();
    // Get mouse offset.
    const mousex = event.clientX - canvas.offsetLeft;
    const mousey = event.clientY - canvas.offsetTop;
    // Normalize mouse wheel movement to +1 or -1 to avoid unusual jumps.
    const wheel = event.deltaY < 0 ? 1 : -1;

    // Compute zoom factor.
    const zoom = Math.exp(wheel * zoomIntensity);
    
    // Translate so the visible origin is at the context's origin.
    context.translate(originx, originy);
  
    // Compute the new visible origin. Originally the mouse is at a
    // distance mouse/scale from the corner, we want the point under
    // the mouse to remain in the same place after the zoom, but this
    // is at mouse/new_scale away from the corner. Therefore we need to
    // shift the origin (coordinates of the corner) to account for this.
    originx -= mousex/(scale*zoom) - mousex/scale;
    originy -= mousey/(scale*zoom) - mousey/scale;
    
    // Scale it (centered around the origin due to the translate above).
    context.scale(zoom, zoom);
    // Offset the visible origin to it's proper position.
    context.translate(-originx, -originy);

    // Update scale and others.
    scale *= zoom;
    visibleWidth = width / scale;
    visibleHeight = height / scale;
}

<canvas id="canvas" width="600" height="200"></canvas>

jQuery ctrl + scroll zoom

No there is not.

But if you build your website with em or % and not px you will have a easier job when you need to enlarge the website.

There might be better options, but it really depends on why you want to do this.

You can read when to use what here: Why em instead of px?

How to Increase browser zoom level on page load?

Personally I think this is a bad idea; either design your site so it scales easily (not hard with proper CSS/HTML techniques). Typically you should not make UX decisions for people.

But it is possible.

Demo: http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

Note that previous versions of this answer used transform to support more browsers. However, this shortened code appears to work for current versions of Chrome, FF, Safari and IE (as well as previous versions of IE, which have supported zoom for a long time).

---

Related Topics