使用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中变量相关的细节分析
Aug 13 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
原生js实现放大镜特效
Mar 08 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
原生JS实现拖拽功能
Dec 16 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
模拟xcopy的函数
2006/10/09 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php查询ip所在地的方法
2014/12/05 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Django开发中的日志输出的方法
2018/07/02 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python常用库大全及简要说明
2020/01/17 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
2015中学教学工作总结
2015/07/22 职场文书
六年级作文之关于梦
2019/10/22 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
idea下配置tomcat避坑详解
2022/04/12 Servers