您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
使用CSS3的scale实现网页整体缩放
作者：佚名 责任编辑：admin 更新时间：2022-06-22
QQ邮箱的网页整体缩放效果，原来实现方法如此简单，下面有个实现示例，大家可以参考下
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下： 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>测试页面</title> <style type="text/css"> div { width: 600px; text-align: center; font-size: 4em; color: #333; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script> <script type="text/javascript"> $(function() { var r = document.body.offsetWidth / window.screen.availWidth; $(document.body).css("-webkit-transform","scale(" + r + ")"); }); $(window).resize(function() { var r = document.body.offsetWidth / window.screen.availWidth; $(document.body).css("-webkit-transform","scale(" + r + ")"); }); </script> </head> <body> <div>改变窗口大小试试，你会发现什么？</div> </body> </html>- 上一个程序编程： js判断iframe内的网页是否滚动到底部触发事件
- 下一个程序编程： javascript:window.open弹出窗口的位置问题
