使用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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
javascript操作referer详细解析
Mar 10 Javascript
jquery中radio checked问题
Mar 16 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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
PHP的基本常识小结
2013/07/05 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
python实现井字棋游戏
2020/03/30 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Python根据成绩分析系统浅析
2019/02/11 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python range与enumerate函数区别解析
2020/02/28 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
什么是URL
2015/12/13 面试题
培训班主持词
2014/03/28 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python