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

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

（1）zoom

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

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

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

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

（2）transform

transform:scale(1.1,1.1);

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

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

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>

效果：

注意：

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

transform-origin:50% 50% 0

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

transform-origin: center top;

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

赞 (0)

相关推荐

  • Javascript在IE和Firefox浏览器常见兼容性问题总结

    本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题.分享给大家供大家参考,具体如下: 表单 document.formName.item("itemName") IE:可以使用document.formName.item("itemName")或document.formName.elements["elementName"] Firefox:只能使用document.formName.elements["el

  • js实现兼容IE、Firefox的图片缩放代码

    本文实例讲述了js实现兼容IE.Firefox的图片缩放代码.分享给大家供大家参考,具体如下: function SetSize(obj, width, height) { myImage = new Image(); myImage.src = obj.src; if (myImage.width > 0 && myImage.height > 0) { var rate = 1; if (myImage.width > width || myImage.height

  • Firefox和IE兼容性问题及解决方法总结

    在开发多语言java 网站的过程中,发现不少FF中可以正常运行的代码,可是在IE中不行,反之亦然.IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下: 1.兼容firefox的 outerHTML,FF中没有outerHtml的方法 复制代码 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=t

  • firefox火狐浏览器与与ie兼容的2个问题总结

    1:rules与cssRules区别: 复制代码 代码如下: function addCSSRule(css,key,value){ //var css = document.styleSheets[document.styleSheets.length-1]; if(navigator.userAgent.indexOf("Firefox")>0 ) { css.insertRule(key+"{"+value+"}", css.cssR

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

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

    1.页面缩放用到的技术点 (1)zoom zoom:normal | <number> | <percentage> 默认值:normal 适用于:所有元素 继承性:有 可以使用用浮点数和百分比来定义缩放比例. zoom的浏览器兼容性:http://caniuse.com/#search=zoom zoom的兼容性:firefox 全系列不支持. (2)transform transform:scale(1.1,1.1); scale(x,y) 定义 2D 缩放转换. 兼容性:ht

  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

  • IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结

    经我们编辑整合的版本: 注意 如果你使用的是firefox浏览器必须要做以下设置 1.在地址栏输入about:config然后回车,警告确认 2.在过滤器中输入"dom.allow_scripts_to_close_windows",双击即可将此值设为true 即可完成了. js关闭窗口兼容firefox.chrome.ie 复制代码 代码如下: function windowclose() { var browserName = navigator.appName; if (brow

  • Ubuntu解决火狐浏览器无法同步书签的问题【推荐】

    最近在ubuntu系统中使用自带的firefox浏览器,发现有写问题,比如登陆后,书签,历史记录等,原本在windows下同步的数据无法同步,添加书签的功能也无法使用. 经过查询资料后得知,unbuntu系统中自带的firefox是国际版的,服务器与中国版的不同,因此无法实现数据的同步,所以,我们需要重新安装中国版的firefox火狐浏览器.下面是亲测的安装步骤. 1.首先,我们要下载最新版本的中国版firefox火狐浏览器, 下载地址:http://www.firefox.com.cn/ 2.

  • 一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子

    1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.el

  • 防止页面被iframe(兼容IE,Firefox火狐)

    以前防止页面被iframe使用的是这段代码 复制代码 代码如下: <script type="text/javascript> if (top.location !== self.location) { top.location=self.location; } </script> 但是在Firefox里你会发现页面会一直不停的在刷. 页面根本没法用. 这里是因为firefox windows.top如果没有那么就是空,在IE下windows.top就是本窗口 页面不断的

  • JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

    1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 复制代码 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment

  • 解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测,发现登陆成功后执行页面跳转函数这段JavaScript(JS)代码特效在IE和谷歌浏览器Chrome下都可以很好地执行,兼容性还不错.结果到了火狐(FireFox)浏览器下setTimeout这个JS内置函数不执行了,无效了,也没报错!打开FireBUG指望它能检测出JS的错误,结果没用...Javascript(JS)脚本代码在各浏览器下的兼容是一个很头疼的问题,经过一番调试和搜索,终于解决了setTimeout这个JS代码在火

  • JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法

    本文实例讲述了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法.分享给大家供大家参考,具体如下: 为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! <html> <head> <title>测试</title> <script language="javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta &&a

随机推荐