使用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> 

您可能感兴趣的文章:

scale
缩放

Windows下支持自动更新的Electron应用脚手架的方法
这篇文章主要介绍了Windows下支持自动更新的Electron应用脚手架的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
微信小程序实现同一页面取值的方法分析
这篇文章主要介绍了微信小程序实现同一页面取值的方法,结合实例形式分析了微信小程序在同一页面取值的常见情况与具体操作技巧,需要的朋友可以参考下
2019-04-04
JavaScript图片处理与合成总结
这篇文章主要介绍了JavaScript图片处理与合成的相关知识点以及相关实例代码分析，有兴趣的朋友学习下。
2018-03-03
JavaScript快速排序(quickSort)算法的实现方法总结
快速排序的思想式分治法,选一个基准点,然后根据大小进行分配,分配然完毕之后,对已经分配的进行递归操作,最终形成快速排序,所以递归也是快速排序思想的一个重要组成部分,本文主要给大家介绍了JavaScript实现快速排序的写法,需要的朋友可以参考下
2023-11-11
JavaScript图像放大镜效果实现方法详解
这篇文章主要介绍了JavaScript图像放大镜效果实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
浅谈js中子页面父页面方法变量相互调用
下面小编就为大家带来一篇浅谈js中子页面父页面方法变量相互调用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
点击按钮出现60秒倒计时的简单js代码(推荐)
下面小编就为大家带来一篇点击按钮出现60秒倒计时的简单js代码(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
微信小程序上传文件到阿里OSS教程
这篇文章主要为大家详细介绍了微信小程序上传文件到阿里OSS教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
JavaScript动态添加css样式和script标签
这篇文章主要介绍了JavaScript动态添加css样式和script标签的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
js前端解决跨域的八种实现方案
这篇文章主要介绍了js前端解决跨域的八种实现方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04