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. kNN(K-Nearest Neighbor)最邻近规则分类

    KNN最邻近规则,主要应用领域是对未知事物的识别,即推断未知事物属于哪一类,推断思想是,基于欧几里得定理,推断未知事物的特征和哪一类已知事物的的特征最接近: K近期邻(k-Nearest Neighb ...

  2. IT程序猿们，我该做什么选择呢

    这个时刻,我想我遇到人生小拐点了,程序猿到了30岁,到达了一个分界线了,现在的我该何去何从呢? 先谈下简单的情况吧: 来这个公司2年了,之前因为身体的原因,不想那么累,于是选择了一份维护的工作,就来了 ...

  3. 用资源管理器右键编译 Visual Studio 解决方案文件

    每次改动 VC 工程之后都要重新编译,每次 VS 又会生成调试数据库文件,很费时间,于是研究了一下如何在资源管理器中直接编译,还真发现了解决办法. 以下是适用 Visual Studio 2008 的 ...

  4. mybatis配置文件，注意标签配置顺序。否则报错The content of element type "configuration" must match "(properties?,settings?,...怎么解决

    感谢原作者http://www.cnblogs.com/zhoumingming/p/5417014.html 注意每个标签必须按照顺序写,不然就会提示错误 顺序是 <?xml version= ...

  5. andriod 浏览文件

    protected void browse() { Intent it = new Intent(Intent.ACTION_GET_CONTENT); //创建动作为 "选取" ...

  6. 【xshell】xshell设置快捷键 设置Ctrl+C Ctrl+V快捷键为复制粘贴

    在使用xshell的时候,总是不能顺手的进行复制粘贴的操作. 那能不能设置xhsell的快捷键呢? 点击工具--->选项---> 选择 键盘和鼠标 选项卡--->点击编辑----&g ...

  7. jsonConfig使用方法

    1.先编写jsonConfig的初始化代码 private JsonConfig jsonConfig; public action构造方法() { jsonConfig = new JsonConf ...

  8. Leader之重

    1:合理安排每个CASE并检查每个人每天的工作进度和质量: 这会让一个庞大的工作,或者看上不可能完成的任务,变成可完成的.   2:警惕对立情绪,并寻找交接者: 永远无法控制所有成员对你或者对团队对公 ...

  9. [开发工具]_[VS2010]_[vs2010的一个bug-使用stringstream时出现]

    1. 注冊Microsfot之后想提交bug, 发现有这个提示, 所以提交不了bug, 有能提交的提交下吧. You are not authorized to submit the feedback ...

  10. OpenCV学习(19) 细化算法(7)

    最后再来看一种通过形态学腐蚀和开操作得到骨架的方法.http://felix.abecassis.me/2011/09/opencv-morphological-skeleton/ 代码非常简单: v ...