• 完美解决手机浏览器不支持fixed或者白屏 、 百度浏览器不支持fixed


    什么都不说了,直接上代码。亲们自己贴下来测试

    <!DOCTYPE html>
    
    <html lang="zh_cmn">
    
    <head>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes,viewport-fit=cover">
            <title>完美解决手机浏览器不支持fixed或者白屏</title>
        </head>
    
        <style>
            html, body {
                -webkit-text-size-adjust: none;
                -webkit-touch-callout: none;
                vertical-align: middle;
                -webkit-user-select: none;
                font-size: 16px;
                position: relative;
                font-family: "Helvetica Neue",Helvetica,STHeiTi,"Roboto Regular",Roboto,"Droid Sans","Microsoft Yahei",sans-serif;
                margin: 0;
                padding: 0;
            }
            body{
    
                height: 100%;
            }
            .border-top:before{
                display: block;
                position: absolute;
                right: 0;
                left: 0;
                border-top: 1px solid #e1e1e1;
                content: ' '
            }
    
            .border-top {
                position: relative
            }
    
            .border-top:before {
                top: 0
            }
    
            @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
                .border-top:before, .border-bottom:after {
                    -webkit-transform: scaleY(0.7);
                    transform: scaleY(0.7);
                    -webkit-transform-origin: left bottom
                }
    
                .border-top:before {
                    -webkit-transform-origin: left top
                }
            }
    
            @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                .border-top:before, .border-bottom:after {
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5)
                }
            }
    
    
            .nav {
                position: fixed;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 9020;
                background: #ffc754
            }
    
            .nav:before {
                border-top-color: #e9e9e9
            }
            .btn{
                overflow: hidden;
                height: 50px;
                text-align: center;
                white-space: nowrap;
                font-size: 0
            }
    
        </style>
    
    </head>
    
    <body>
    <div class="nav border-top iphonex-bottom-fixed">
        <ul class="btn"></ul>
    </div>
    
    <div>
        <img src="active.jpg" width="100%"/>
    </div>
    </body>
    </html>
  • 相关阅读:
    进程和程序
    linux socket基本知识
    window核心编程 第五章 作业
    树的基本操作(C语言)
    每天都在反省自己,但是每天却都浑浑噩噩
    Windows核心编程 内核对象
    还没完整看过一本技术的书籍啊
    管道
    Memory Layout of a C Program(7.6)
    cpio命令用法
  • 原文地址:https://www.cnblogs.com/wukeke/p/8423982.html
Copyright © 2020-2023  润新知