1、无障碍阅读使用场景

无障碍阅读一般在政府类网站使用比较多，如：

天津海事局（http://www.tjmsa.gov.cn/），其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug，不起作用。

中国海事局（http://www.msa.gov.cn/）：

无障碍阅读一般包括以下功能：

1.1 页面放大

1.2 页面缩小

1.3 文字放大（页面所有文字字号逐渐变大）

1.4 文字缩小（页面所有文字字号逐渐变小）

1.5 开启对比度（页面所有背景变黑，文字变白）

以上功能中，最主要的为页面放大和页面缩小，文字放大和文字缩小容易导致页面结构变形（尤其是文字变大容易使文字超出边框）。以下主要研究页面放大和页面缩小的技术点。

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

（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不支持。

3、页面缩放示例代码

<!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火狐浏览器）的更多相关文章

  1. 制作便携版 FireFox 火狐浏览器

    Firefox是一款可高度自定义的开源浏览器: 你可以访问 火狐DIY 定制自己的Firefox安装包, 此外,你还可以自己动手定制一款可以放在U盘随身携带的便携版Firefox火狐浏览器. 制作便携 ...

  2. 解决 Firefox 火狐浏览器下载 .exe 文件卡住的问题 以及关闭测试版cache2

    解决 Firefox 火狐浏览器下载 .exe 文件卡住的问题 在firefox浏览器地址栏里输入:about:config 点“我保证会小心”,显示firefox的高级配置列表 在配置页面的搜索框里 ...

  3. firefox火狐浏览器过滤广告插件：Adblock Plus

    firefox火狐浏览器过滤广告插件:Adblock Plus

  4. Firefox火狐 浏览器接口调试工具 JSON 格式化

    作为一名“IT界”的淫才,还是主攻Web端的淫才,相信大家经常会联调各种接口! 如今APP猖狂的年代接口联调更为频繁,当然我们常用于Firefox火狐 浏览器,所以这里主要讲Firefox火狐 浏览器 ...

  5. Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版（Extended Support Release, 简称“ESR”）

    Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版(Extended Support Release, 简称“ESR”) 延长支持版本(Extended Support Releas ...

  6. 【转】关闭firefox火狐浏览器下载完成时自动扫描（49.0.2以后版本）

    用firefox火狐浏览器下载文件到最后时,会显示"剩余时间未知",将持续10秒钟左右,即使几KB 的文件,也要持续这么长时间,问度娘才知道是自动扫描,检查是否有毒,用的却是Goo ...

  7. 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果

    逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...

  8. FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...

  9. Firefox火狐浏览器提示您的链接并不安全（解决办法）

    火狐浏览器不管访问什么,一直提示连接不安全 解决办法: 1.在Firefox地址栏输入"about:config",回车,进入如下图页面 点击"我了解此风险" ...

随机推荐

  1. maven 自动部署到 tomcat7

    多方搜索,终于使maven项目可以自动发布到tomcat下了. tomcat7 需要使用 tomcat-maven-plugin 的新版本,版本支持tomcat6和tomcat7,groupId也由o ...

  2. 最好的PHP博客系统

    1.Wordpress http://www.wordpress.org/ B2基础上开发而来,这是国内用户比较喜欢而且用户较多的一个php博客程序,缘由是因为Wordpress提供大量插件和模板,让 ...

  3. 关于myBatis的问题There is no getter for property named 'USER_NAME' in 'class com.bky.model.实例类'

    现在流行的 ssm(spring + struts2 + myBatis)  持久层的mybatis是需要配置映射器的,找了个demo连接的数据库是MySQL 于是就修改了一下弄成了连接Oracle的 ...

  4. [Javascript]XMLHttpRequest对象实现下载进度条

    摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...

  5. 禁用IE缓存

    HTTP消息报头包括普通报头.请求报头.响应报头.实体报头. 普通报头中的Cache-Control用于指定缓存指令,缓存指令是单向的(响应中出现的缓存指令在请求中未必会出现),且是独立的(一个消息的 ...

  6. 【Linux】在虚拟机上安装CentOS7

    在配置好的机子上,可以装个双系统,但是在我自己的本子上,磁盘读写太垃圾了,连压缩卷 都执行不了,分不出空间,装不了CentOS系统,没办法,采用虚拟机的方式,把它转起来. -------------- ...

  7. xtraTabbedMdiManager 双击最大化和关闭后返回主界面 z

    双击tab头部时候子窗体Float时界面最大化和关闭Float状态的子窗体并不是真正关闭而是回到主界面的问题, 代码如下,其中xtraTabbedMdiManager1_Floating这个是xtra ...

  8. NLP 依存分析

    NLP 依存分析 https://blog.csdn.net/sinat_33741547/article/details/79258045

  9. Cesium应用篇：1快速搭建 【转】

    范例中所有范例可以在Github中搜索:ExamplesforCesium Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二 ...

  10. Keras Data augmentation(数据扩充)

    在深度学习中,我们经常需要用到一些技巧(比如将图片进行旋转,翻转等)来进行data augmentation, 来减少过拟合. 在本文中,我们将主要介绍如何用深度学习框架keras来自动的进行data ...