页面缩放兼容性处理方法(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 捕获窗口关闭事件
Jul 26 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
js new Date()实例测试
Oct 31 Javascript
微信小程序实现搜索功能
Mar 10 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
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python实现机器人卡牌
2019/10/06 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
四种会话跟踪技术
2015/05/20 面试题
运动会致辞稿50字
2014/02/04 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python