html 整体缩小zoom,页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
1、页面缩放用到的技术点
(1)zoom
zoom:normal | |
默认值:normal
适用于:所有元素
继承性:有
可以使用用浮点数和百分比来定义缩放比例。
zoom的兼容性:firefox 全系列不支持。
(2)transform
transform:scale(1.1,1.1);
scale(x,y)定义2D 缩放转换。
transform 属于CSS3属于,其兼容性:IE6-8不支持。
2、页面缩放示例代码
页面缩放兼容性处理(zoom,Firefox火狐浏览器)
* {
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;
}
页面放大
页面缩小
前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
$(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();
});
})
效果:
注意:
transform转换的基准位置属性为transform-origin,transform-origin属性默认值为上下左右中间位置,即:
transform-origin:50% 50% 0
为防止页面顶部看不到,可以对transform-origin进行重新设置:
transform-origin: center top;
以上这篇页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html 整体缩小zoom,页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)相关推荐
- Firefox火狐浏览器如何修改页面的显示比例
Firefox火狐浏览器如何修改页面的显示比例 1.首先在浏览器里打开一个新的标签页,在地址栏输入:about:config 2.在搜索框中输入:zoom,找到browser.zoom.siteSpe ...
- IE6,IE7,firefox火狐浏览器兼容性在DIV+CSS中的写法
DIV+CSS浏览器兼容问题一直困绕着许多从事DIV+CSS网页排版的美工人员,尤其是IE与火狐的兼容.用DIV+CSS布局的网页在IE下显示一切正常,可是在火狐(FireFox)浏览器里打开,本来好 ...
- html设置缩放级别,自定义页面缩放「Custom Page Zoom」
详情 推广从前,有只小白兔,一天它挖到一只好大的胡萝卜,往家里搬的时候,半路上杀出一只穿山甲一把抢走了小白兔的胡萝卜.小白兔生气冲着穿山甲说:"你干什么呢!",穿山甲说: &quo ...
- FireFox火狐浏览器不支持CSS中zoom属性的解决办法
首先需要明确一点的是,火狐浏览器全系列不支持CSS的zoom缩放属性. 浏览器兼容查询网站:https://caniuse.com/ 所以此时只能通过transform的scale实现放缩 代码很简单 ...
- 浏览器兼容性适配方法总结(跨浏览器)
浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9. 1-1.条件性注释(Conditional comments) [只有IE9及以前版本支持] 引入语法: 在c ...
- FireFox火狐浏览器调试响应式页面
对于不同分辨率页面可能出现不同的样式,可以用CSS3的媒体查询来针对不同浏览器设置不同样式来解决问题,那么如何在浏览器中进行不同分辨率的调试,现在整理下在火狐浏览器调试的方法. 1.打开FireFox ...
- css 网页整体缩小_css实现缩放自适应网页--手机web
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. viewport是网页默认的宽度和高度, ...
- html中页面缩放为何不居中,浏览器窗口放大缩小后页面内容居中解决方法
先说下简单的思路: 1.获得窗口的大小,高度,宽度. 2.要知道显示的图片(我这里用图片举例)的大小,宽,高.(我的图片显示设置为 宽:960,高600 ) 3.简单算法,获得的浏览器宽,高 减去 图 ...
- 解决css firefox火狐浏览器IE浏览器下的兼容性问题
来源:http://www.163ns.com/zixun/post/4544.html 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-ri ...
最新文章
- efishell无法开机shell_电脑出现EFIshellversion解决方法W1048/海尔青春小蓝
- StructureMap 代码分析之Widget 之Registry 分析 (1)
- 熟水凉白开,瓶装水新风口?
- Python操作Excel表格
- mysqldump导出数据库 (dos环境下)
- java spi机制_Java是如何实现自己的SPI机制的? JDK源码(一)
- 怎么给图片降噪?WidsMob Denoise 图片降噪教程
- 记ByteCTF中的Node题
- 正则表达式中或关系表示及查找英文字母最后一个
- less 之Extend 及 Extend all用法
- 使用IDM继续下载会话过期的文件
- 【洛谷 1057】传球游戏
- Oracle 初始化参数性能视图
- Algorithm:数学建模大赛(CUMCM/NPMCM)之CUMCM之2006B之2006之B题《艾滋病疗法的评价及疗效的预测》
- 2020-11-02-Ubuntu 20.04安装Anaconda3-卸载Anaconda3-笔记
- Html页面Js调用android本地相机和图片
- 柳传志回应“联想5G投票事件”:不要罔顾事实挑拨离间
- oracle存货转资产,存货转固定资产账务处理
- table宽度一样宽_table自适应宽度
- 计算机思维 Computational Thinking(转载)
热门文章
- python+OpenCV笔记(三十七):检测运动物体——使用MOG/KNN背景差分器
- 一步一步在 Windows 10 用 visual studio 2019 编译 zmqpp 4.2.0 版
- 获取post中的请求参数1
- EventBus使用详解的
- Wi-Fi 工作频段
- c语言 at指令gprs,gprs AT 指令
- lt;html xmlns=http://www.w3.org/1999/xhtmlgt;
- 关于springmvc项目一加入validation-api包就报错的解决方法
- Python聊天室设置与实现
- Linux克隆虚拟机