浏览器都有页面全屏的功能 F1一,那么什么样用JavaScript调节页面全屏呢?MDN上提供的的API ,
二个小demo验证一下!

假让你时不时索要做前端页面,那么您早晚多多少少需求消除页面包车型客车浏览器包容难题。而浏览器包容难题半数以上也集中在对IE系列的相称。这里就总计一下对IE类别的CSSHack,记录一下,方便以往翻看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全屏</title>
    <style>
        html,
        body {
            height: 100%;
        }

        img {
            display: block;
            margin: 100px auto 0;
            width: 900px;
            cursor: pointer;
        }
        /* webkit和IE在元素进入全屏后,会保持元素原有的尺寸,所以需要通过css伪类进行设置 */
        img:-webkit-full-screen{
            width: 100%;
            height: 100%;
        }

        img:-ms-fullscreen {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <img id="target" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530343927072&di=ba9a25dc1d88a14556abf44106a32a4f&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe9%2F3d%2Ffc%2Fe93dfc90c7406e68dd72afac6dda0357.jpg"
        alt="永利开户送38元体验金 1">
    <script>
        window.onload = function () {
            let img = document.querySelector('#target');
            // 监听事件 注意不同浏览器的兼容性问问题

       // 错误事件为:fullscreenerror , 同样注意前缀

            document.addEventListener('fullscreenchange' , function() {
                console.log('全屏切换!')
            })
            document.addEventListener('webkitfullscreenchange' , function() {
                console.log('全屏切换!')
            })
            document.addEventListener('mozfullscreenchange' , function() {
                console.log('全屏切换!')
            })
            document.addEventListener('MSFullscreenChange' , function() {
                console.log('全屏切换!')
            })

       // 图片点击切换全屏
            if (isFUllScreenEnabled()) {
                img.addEventListener('click', function () {
                    if (hasFullScreenElement()) {
                        exitFullScreen();
                    } else {
                        setFullScreen(img);
                    }
                });
            } else{
                console.log('此浏览器不支持全屏');
            }
        }


        // 判断浏览器是否支持全屏
        function isFUllScreenEnabled() {
            return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
        }

        // 判断是否有已全屏的元素
        function hasFullScreenElement() {
            return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
        }

        // 将目标元素设置为全屏展示
        function setFullScreen(target) {
            if (target.requestFullscreen) {
                target.requestFullscreen();
            }
            if (target.webkitRequestFullscreen) {
                target.webkitRequestFullscreen();
            }
            if (target.mozRequestFullScreen) {
                target.mozRequestFullScreen();
            }
            if (target.msRequestFullscreen) {
                target.msRequestFullscreen();
            }
        }

        // 文档退出全屏
        function exitFullScreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    </script>
</body>

</html>

IE Hack

 

IE体系浏览器的hack大致如下:

  Api的选取都很简短,首要正是3个包容性的难点,那一个小demo,在Chrome,Firefox,艾德ge,IE
1壹 上测试过,都能够健康切换全屏,也得以寻常监听事件。

  • _nowamagic:1px;———–ie6
  • *nowamagic:1px;———–ie7
  • nowamagic:1px\0;———-ie89
  • nowamagic:1px\9\0;——–ie9
  • :root nowamagic:一px; —-ie玖(实际景况可能ie九依旧不平日,再用这种方法)

  要留心Firefox中艺术的拼写,F为题写(囧 ,
报错了看了半天,原来是拼写错误),Chrome和IE的回想要加CSS伪类去设置样式。

那般就多数就能够相配全体IE。

永利开户送38元体验金 2

里头粉暗黄部分为属性hack,葱青部分为挑选器hack,它们能够组成使用。其余Firefox和Chrome也有它们专有的hack,详细hack方式及使用示比方下:

Firefox 与 Chrome 的 Hack

Firefox:

@-moz-document url-prefix() /*写在选择器外层时(只可写在此间):Firefox
only*/

Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0)
/*写在选拔器外层时(只可写在那边):Chrome only*/

动用示例:

@-moz-document url-prefix() /*Firefox*/{ body { background-color:pink;
}}

浏览器对css的分析是以前到后的,并且选用末段二个体制注明。

CSS实例

.color{ background-color: #CC00FF; /*永利开户送38元体验金,不无浏览器都会呈现为浅紫*/
background-color: #FF0000\9; /*IE陆、IE7、IE八会展现浅蓝*/
*background-color: #0066FF; /*IE6、IE7会成为卡其色*/
_background-color: #009933; /*IE六会化为鲜绿*/}

background: red; /* 对FF Opera和Safari有效 */#background: blue; /*
对 IE6 和 IE7有效 */_background: green; /* 只对IE6有效
*//*/background: orange;*/ /** 只对IE8有效 **/!important
/*FF、IE7有效*/* /*IE都有效*/

IE八是能够和IE柒兼容的,轻松1行代码,让IE8自动调用IE7的渲染形式。只须要在页面中进入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE八读到那个标签,它就能够活动运营IE7包容方式,保障页面完整展示。

混用起来大概是这么:

:root .demo {background:#963\9; /* 仅IE9适用 */}.demo {width:
300px;height: 200px;background: #036; /* 全体浏览器都适用
*/background: #09F\9; /* IE6~IE9 */background: #09F\0; /*
IE8~IE9 */background: #09F\0/; /* IE8 */*background: #F60; /*
IE6/IE7 */+background: #F60; /* IE6/IE7 */@background: #F60; /*
IE6/IE7 */>background: #F60; /* IE6/IE7 */_background: #ccc;
/* IE6 */}@media all and (min-width:0) {.demo {background: #F06; /*
webkit and opera */}}@media screen and
(-webkit-min-device-pixel-ratio:0){.demo {background:#609;}/*webkit (&
Opera9.2)*/}

相关文章