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里如何根据不同的environment打包

    一个项目里总会有很多配置文件.而且一般都会有多套环境.开发的.测试的.正式的.而在这些不同的环境这些配置的值都会不一样.比如mail的配置.服务的url配置这些都是很常见的.所以在打包的时候就要根据e ...

  2. lol匹配算法

    这是Riot的Design Director Tom Cadwell专门为中国玩家写的解说匹配系统工作原理的帖子. 同一时候为了让大家更好的理解匹配系统,假设您认为您遇到了特别不公平的匹配,请回复游戏 ...

  3. eclipse 启动不起来（不能创建VM）

    Specifying the Java virtual machine Here is a typical Eclipse command line: eclipse -vm c:\jdk1.4.2\ ...

  4. Extjs gridPanel 动态指定表头

    var colMArray = new Array(); colMArray = [{header : "产品代码", dataIndex : "cpdm", ...

  5. mongodb 只查询一个字段

    db.users.find({}, {"userName":1,"_id":0}) ; "_id":0表示不显示_id

  6. Jquery焦点图/幻灯片效果 插件 KinSlideshow

    JavaScript $(function(){         $("#KinSlideshow").KinSlideshow({                 moveSty ...

  7. Derby设置密码教程

    方法一:    配置derby.propertites文件: 文件内容: derby.connection.requireAuthentication=truederby.authentication ...

  8. idea 配置简单web

    1.创建Facets 创建web的facets,可修改web的目录路径,如java目录 2.创建artifacts 创建web aplication exploded ,添加lib包到web-inf, ...

  9. VMware+Windgb+Win7内核驱动调试

    com1被占用了,需要用com2

  10. how to configure logback for Mybatis to print my SQL

    To log SQL statements for particular mybatis mapper set DEBUG (TRACE to see query parameters and res ...