页面缩放兼容性处理方法(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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
javascript中expression的用法整理
May 13 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
学习node.js 断言的使用详解
Mar 18 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
详谈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图片上传类带图片显示
2006/11/25 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
yii数据库的查询方法
2015/12/28 PHP
项目实践之javascript技巧
2007/12/06 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python 伯努利分布详解
2020/02/25 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
酒店管理自荐信
2013/10/23 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
婚礼主持词开场白
2014/03/13 职场文书
小学英语课后反思
2014/04/26 职场文书
美国留学经济担保书
2014/05/20 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
安全生产学习心得体会
2016/01/18 职场文书
欧元符号 €
2022/02/17 杂记
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技