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. IOS7开发～Images.xcassets

    from:http://blog.csdn.net/liufan321/article/details/9121241 新建项目,如下所示: 本文分享一下Images.xcassets的体验~_~ 1 ...

  2. FolderSync ：The various features and how to use them

    Help - Tacit Dynamics Help This page describes the various features of FolderSync and how to use the ...

  3. spring源码分析之BeanfFactory

    spring的IOC容器能够帮我们自动new对象,对象交给spring管之后我们不用自己手动去new对象了.那么它的原理是什么呢?是怎么实现的呢?下面我来简单的模拟一下spring的机制,相信看完之后 ...

  4. java代码声明引用变量经验

    1.static只能修饰类的成员变量,不能修饰方法里的局部变量. 因为static是在类加载时候将成员变量存储进方法区的. 加载类的时候,是不去执行方法里的函数的.所以不会馆方法里的代码,自然就不会读 ...

  5. 5-05. QQ帐户的申请与登陆（25）（map运用）（ZJU_PAT）

    题目链接:http://pat.zju.edu.cn/contests/ds/5-05 实现QQ新帐户申请和老帐户登陆的简化版功能. 最大挑战是:据说如今的QQ号码已经有10位数了. 输入格式说明: ...

  6. jquery实现上线翻滚效果公告

    //样式文件: <style type="text/css"> * { margin:; padding:; } .scrollNews { width: 100%; ...

  7. fisher精确检验(fisher’s exat test)和超几何分布

  8. Linux 提权常用命令集

    转载:http://www.myhack58.com/Article/html/3/8/2017/83236.htm 0x00 操作系统相关 操作系统类型版本 cat /etc/issue cat / ...

  9. mybatis映射文件遇到的小问题

    mybatis的映射文件插入操作时: 如果对应的属性是String类型的,那么一定要做空串的判断. 比如注册的时候,如果需要向数据库中插入一条记录时,对应的字段没有给他赋值,这个String类型的值传 ...

  10. Git教程之工作区和暂存区

    工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区: