页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
更新时间：2017年08月29日 08:29:01 作者：孟繁贵
下面小编就为大家带来一篇页面缩放兼容性处理方法(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火狐浏览器)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了微信小程序网络数据请求的方式和注意事项讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，我们希望本地能搭建一个服务器，本文就介绍如何使用webpack-dev-server搭建本地服务器，感兴趣的可以了解一下2021-07-07
Bootstrap 粘页脚，说得具体一点就是“将固定高度的页脚紧贴页面底部”，本文给大家分享具有实现代码，感兴趣的朋友参考下吧2016-03-03
在本篇文章里我们给大家带来一篇关于用原生JS编写兼容IE6,7,8浏览器无缝自动轮播的相关知识点，需要的朋友们参考下。2018-10-10
这篇文章主要为大家详细介绍了微信小程序实现列表左右滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了原生JavaScript实现异步多文件上传，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要给大家介绍了关于js中对象与对象创建方法的各种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
这篇文章主要和大家分享一个炫酷的碎片式切图效果，本文主要利用canvas来实现，代码量不多，但有些地方还是需要花点时间去理解的，感兴趣的可以学习一下2022-10-10
这篇文章主要介绍了Javascript点击按钮随机改变数字和其字体的颜色，实现后的效果很不错，具有一定的参考价值，有需要的可以参考借鉴，下面来一起看看。2016-09-09
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Bootstrap modal 多弹窗之叠加显示不出弹窗问题，今天小编抽时间给大家分享下解决方案，需要的朋友参考下2017-02-02
最新评论