使用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 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
使用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
如何选购合适的收音机
2021/03/01 无线电
php auth_http类库进行身份效验
2009/03/19 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
实习护理工作自我评价
2013/09/25 职场文书
社区八一活动方案
2014/02/03 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
房屋产权证明书
2014/10/15 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
世界环境日活动总结
2015/02/11 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书