使用CSS3的scale实现网页整体缩放
2023-06-13 09:15:20 时间
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下：
复制代码代码如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>测试页面</title>
<styletype="text/css">
div{
width:600px;
text-align:center;
font-size:4em;
color:#333;
}
</style>
<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.11.0.js"></script>
<scripttype="text/javascript">
$(function(){
varr=document.body.offsetWidth/window.screen.availWidth;
$(document.body).css("-webkit-transform","scale("+r+")");
});
$(window).resize(function(){
varr=document.body.offsetWidth/window.screen.availWidth;
$(document.body).css("-webkit-transform","scale("+r+")");
});
</script>
</head>
<body>
<div>改变窗口大小试试，你会发现什么？</div>
</body>
</html>