使用CSS3的scale实现网页整体缩放
更新时间：2014年03月18日 17:44:09 作者：
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>
复制代码 代码如下:
<!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>
相关文章
不知道大家有没有发现在现在的移动页面上，有很多情况需要加载大量的资源。但是移动端的访问速度和pc还是有很大的差距，有些时候需要一些取巧的方式来提升用户体验，而实时显示加载进度就是其中一种。这篇文章就给大家分享了Javascript实现文件实时加载进度的方法。2016-10-10
本篇文章介绍了js操作iframe的一些方法的实例代码与步骤，有需要的朋友可以参考一下2013-06-06
本篇文章主要介绍了requirejs按需加载angularjs文件实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了js实现点击链接后延迟3秒再跳转的方法,通过javascript的setTimeout方法实现延迟跳转的功能,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了微信小程序—仿淘宝热搜词在搜索框中轮播功能的相关资料,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
在JavaScript中使用Promise.allSettled()的方法
Promise.allSettled()是一个游戏规则改变者，让您等待所有承诺得到解决（解决或拒绝），然后根据结果采取行动，这篇文章主要介绍了如何在JavaScript中使用Promise.allSettled(),需要的朋友可以参考下2023-07-07
下面小编就为大家带来一篇JS判断是否在微信浏览器打开的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
xtree.js 代码...2007-03-03
这篇文章主要为大家介绍了JavaScript 算法 复写0双指针解法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论