我怎样才能像 firefox 一样根据浏览器的宽度/高度自动缩放页面 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>
关于javascript - 根据浏览器的宽度/高度在页面上自动缩放，就像 firefox 那样 ctr+-，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10746138/