使用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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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实现window平台的checkdnsrr函数
2015/05/27 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
聊聊Python中的pypy
2018/01/12 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
优秀交警事迹材料
2014/01/26 职场文书
校运会广播稿100字
2014/01/27 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
召开会议通知范文
2015/04/15 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
centos8安装MongoDB的详细过程
2021/10/24 MongoDB