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. 重温PHP面向对象的三大特性

    PHP面向对象的三大特性:封装性.继承性.多态性. 1. 封装性: 也称为信息隐藏,就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系,或者说只公开了一些供开发人员使用的方法. 于是开发人员 ...

  2. 在IIS上部署基于django WEB框架的python网站应用

    django是一款基于python语言的WEB开源框架,本文给出了如何将基于django写的python网站部署到window的IIS上. 笔者的运行环境: Window xp sp3 IIS 5.1 ...

  3. DotNet_Performance_Tuning_ANTS_Performance_Profiler

    http://www.cnblogs.com/parry/archive/2013/01/04/DotNet_Performance_Tuning_ANTS_Performance_Profiler. ...

  4. iOS上使用自己定义ttf字体

    项目中想使用第三方的字体,在stackoverflow上查询解决的方法,也折腾一会,加入成功,示比例如以下: 1.将xx.ttf字体库增加project里面 2.在project的xx-Info.pl ...

  5. EBS安装完成后，对数据库相关配置的改动

    EBS安装完成后,对数据库相关配置的改动 1.转为ASM,数据文件,控制文件,redo log,archived log从文件系统转移至ASM 2.禁用resource manager 由于发现系统的 ...

  6. 《TD式创新”祸国殃民》

    TD式创新”祸国殃民> 作者:北京邮电大学 阚凯力 (2014年12月16日) 电信业内早就众所周知的TD-SCDMA真相,终于公之于天下.铁的事实是,它从来就不是什么“自主知识产权”,而是西门 ...

  7. JAVA自定义注解SpringAOP

    原文:https://my.oschina.net/wangnian/blog/801348 前言:Annotation(注解)是JDK5.0及以后版本引入的,它的作用就是负责注解其他注解.现在开发过 ...

  8. JSONObject以及json（转）

    一.JAR包简介      要使程序 可以运行 必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包:      1.commons-lang.jar      2.commons- ...

  9. iOS News Reader开源项目

    项目介绍 NewsReader项目是一个新闻阅读类开源项目,支持iPhone和iPad. 目前基于该项目并且已发布到App Store的产品有: VOA慢速英语和每天6分钟英语等 项目源码地址:htt ...

  10. [ GIT ] GIT tip : A simple .gitconfig file

    reference : http://fle.github.io/git-tip-a-simple-gitconfig-file.html As several friends have asked ...