使用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.extend函数扩展自己对象的js代码
Dec 09 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
微信小程序实现同时上传多张图片
Feb 03 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
JavaScript实现复选框全选功能
Apr 11 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中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP Include文件实例讲解
2019/02/15 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
js中的闭包学习心得
2018/02/06 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
Python制作钉钉加密/解密工具
2016/12/07 Python
python实现redis三种cas事务操作
2017/12/19 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
python通过链接抓取网站详解
2019/11/20 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
毕业生自我鉴定范文
2013/11/08 职场文书
说明书怎么写
2014/05/06 职场文书
软件售后服务承诺书
2014/05/21 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
2014年防汛工作总结
2014/12/08 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python