页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)


Posted in Javascript onAugust 29, 2017

1、页面缩放用到的技术点

(1)zoom

zoom:normal | <number> | <percentage>
默认值:normal
适用于:所有元素
继承性:有

可以使用用浮点数和百分比来定义缩放比例。

zoom的浏览器兼容性:http://caniuse.com/#search=zoom

页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

zoom的兼容性:firefox 全系列不支持

(2)transform

transform:scale(1.1,1.1);

scale(x,y) 定义 2D 缩放转换

兼容性:http://caniuse.com/#search=transform

页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

transform 属于CSS3属于,其兼容性:IE6-8不支持

2、页面缩放示例代码

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8" />
  <title>页面缩放兼容性处理(zoom,Firefox火狐浏览器)</title>
  <style>
   * {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "microsoft yahei";
    box-sizing: border-box;
   }
   
   p {
    text-indent: 2em;
    line-height: 25px;
   }
   
   .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
   }
  </style>
 </head>

 <body>
  <button type="button" id="pageBig" class="btn">页面放大</button>
  <button type="button" id="pageSmall" class="btn">页面缩小</button>
  <p>
   前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
  </p>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
   $(function() {
    //初始化默认缩放级别
    var zoomNum = 1;
    var $body = $('body');
    //页面放大函数
    function PageBig() {
     zoomNum += 0.1;
     //兼容firefox浏览器代码
     //需要transform-origin:center top设置,否则页面顶部看不到了
     $body.css({
      '-moz-transform': 'scale(' + zoomNum + ')',
      'transform-origin': 'center top'
     });
     $body.css('zoom', zoomNum)
    }
    //页面缩小函数
    function PageSmall() {
     zoomNum -= 0.1;
     //兼容firefox浏览器代码
     //需要transform-origin:center top设置,否则页面顶部看不到了
     $body.css({
      '-moz-transform': 'scale(' + zoomNum + ')',
      'transform-origin': 'center top'
     });
     $body.css('zoom', zoomNum);
    }
    $('#pageBig').click(function() {
     PageBig();
    });
    $('#pageSmall').click(function() {
     PageSmall();
    });
   })
  </script>
 </body>

</html>

效果:

页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

注意:

transform转换的基准位置属性为transform-origin,transform-origin属性默认值为上下左右中间位置,即:

transform-origin:50% 50% 0

防止页面顶部看不到,可以对transform-origin进行重新设置:

transform-origin: center top;

以上这篇页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
详谈Node.js之操作文件系统
Aug 29 #Javascript
js链表操作(实例讲解)
Aug 29 #Javascript
在页面中引入js的两种方法(推荐)
Aug 29 #Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 #Javascript
使用canvas进行图像编辑的实例
Aug 29 #Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
js使用html2canvas实现屏幕截取的示例代码
Aug 28 #Javascript
You might like
php发送post请求函数分享
2014/03/06 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
详解Python中类的定义与使用
2017/04/11 Python
python构建自定义回调函数详解
2017/06/20 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
农民工创业典型事迹
2014/01/25 职场文书
家长写给孩子的评语
2014/04/18 职场文书
奥运会口号
2014/06/13 职场文书
湘江北去观后感
2015/06/15 职场文书