Posted in Javascript onMarch 18, 2014
今天学习了一下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>
使用CSS3的scale实现网页整体缩放
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@