使用CSS3的scale实现网页整体缩放


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>
Javascript 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
小程序实现上传视频功能
Aug 18 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 #Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 #Javascript
js身份证判断方法支持15位和18位
Mar 18 #Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 #Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 #Javascript
javascript页面上使用动态时间具体实现
Mar 18 #Javascript
JS调用页面表格导出excel示例代码
Mar 18 #Javascript
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
JS回调函数深入理解
2019/10/16 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python多线程同步实例教程
2019/08/11 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
小学音乐教学反思
2014/02/05 职场文书
室内设计专业自荐信
2014/05/31 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
办理收楼委托书范本
2014/10/09 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js