使用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功能函数(2009-06-04更新)
Jun 04 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
javascript实现回到顶部特效
May 06 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
vue键盘事件点击事件加native操作
Jul 27 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中文编码小技巧
2014/12/25 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python使用matplotlib画饼状图
2018/09/25 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python新手学习装饰器
2020/06/04 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
男方父母证婚词
2014/01/12 职场文书
销售简历自我评价
2014/01/24 职场文书
战略合作意向书范本
2014/04/01 职场文书
海洋科学专业求职信
2014/08/10 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
python 进阶学习之python装饰器小结
2021/09/04 Python
Python实现仓库管理系统
2022/05/30 Python