根据浏览器的宽度/高度在页面上进行自动缩放，就像 Firefox 所做的 CTR+- 一样

make an auto zoom on page depend on the browser width/height like firefox does ctr+-

本文关键字：缩放 就像 一样 CTR+- Firefox 浏览器 高度      更新时间：2023-09-26

如何像火狐浏览器一样根据浏览器的宽度/高度使页面自动缩放 CTR+-

我尝试了CSS3缩放，它破坏了页面上的某些部分（某些部分是固定位置）我也尝试了JavaScript，许多jQuery插件都没有运气

知道如何制作吗？

PS：我尝试了浏览器缩放，它非常适合

谢谢

试试这个。根据需要添加任意数量的媒体查询。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
    body{
        color: #666;
        background: #ccc;
        font-family: Arial;
        font-size: 62.5%;
        -moz-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    #page{
        width: 600px;
        background: #fff;
        padding: 20px;
    }
    @media screen and (min-width: 800px){
        body{
            -moz-transform: scale(1.2, 1.2);
            -webkit-transform: scale(1.2, 1.2);
            -ms-transform: scale(1.2, 1.2);
            -o-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
        }
    }
    @media screen and (min-width: 1000px){
        body{
            -moz-transform: scale(1.4, 1.4);
            -webkit-transform: scale(1.2, 1.4);
            -ms-transform: scale(1.4, 1.4);
            -o-transform: scale(1.4, 1.4);
            transform: scale(1.4, 1.4);
        }
    }
</style>
</head>
<body>
<div id="page">
    <h1>Test</h1>
    <h2>Test 2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna tortor, ut feugiat nunc. Aenean blandit imperdiet sem et interdum. Proin adipiscing metus ac sapien dictum sed fringilla odio tincidunt. Morbi tempus nulla ut dolor lacinia fringilla. Praesent ut lorem vel nisi hendrerit bibendum id at velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae metus sed nunc accumsan rutrum et ac magna. Vestibulum blandit nibh sed elit convallis in feugiat augue sollicitudin. Praesent orci felis, pharetra sed laoreet vehicula, tincidunt at mauris. Ut sed vehicula mi. 
    </p>
</div>
</body>
</html>

试试 css ZOOM：

body {
    zoom: 0;
}
@media screen and (max-width: 600px) {
    body{
        zoom: 40%;
    }
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

相关文章：