使用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 相关文章推荐
js innerHTML 改变div内容的方法
Aug 03 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
javascript中的面向对象
Mar 30 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
原生js 实现表单验证功能
Feb 08 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
internal修饰符起什么作用
2013/12/16 面试题
How TDD works
2012/09/30 面试题
春节联欢晚会主持词
2014/03/24 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
私人委托书格式
2014/09/10 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python