zoukankan      html  css  js  c++  java
  • 无障碍阅读:页面缩放兼容性处理(zoom,Firefox火狐浏览器)

    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;

     

  • 相关阅读:
    台州 OJ 3847 Mowing the Lawn 线性DP 单调队列
    洛谷 OJ P1417 烹调方案 01背包
    快速幂取模
    台州 OJ 2649 More is better 并查集
    UVa 1640
    UVa 11971
    UVa 10900
    UVa 11346
    UVa 10288
    UVa 1639
  • 原文地址:https://www.cnblogs.com/mengfangui/p/7444634.html
Copyright © 2011-2022 走看看