zoukankan      html  css  js  c++  java
  • 移动端fixed后 横竖屏切换时上部或下部出现空隙问题

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1">
    <style>
    body {}
    
    header {
    position: fixed;
    width: 100%;
    height: 15vw;
    top: 0;
    /*left:0;*/
    background: red;
    }
    
    .box {
    width: 40vw;
    margin: 0 auto;
    }
    
    @media all and (orientation: portrait) {
    #hengping {
    display: none !important;
    }
    }
    /*设备横屏时的样式*/
    
    @media all and (orientation: landscape) {
    #hengping {
    display: block !important;
    }
    }
    
    #hengping {
    display: none;
    background: black;
    position: fixed;
    left: 0;
    /* right:0;*/
    bottom: 0;
    /*top:0;*/
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    </style>
    </head>
    
    <body>
    <header></header>
    <div id="hengping"></div>
    <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint.
    </div>
    </body>
    <script src="jquery.js"></script>
    <script>
    // 横竖屏幕提醒
    (function transverse() {
    if (window.orientation == 90 || window.orientation == -90) {
    var t=$(window).scrollTop()
    $('#hengping').hide();
    // setTimeout(function(){
    $(window).scrollTop(t+1);
    // 横屏
    $('#hengping').show();
    
    } else if (window.orientation == 180 || window.orientation === 0) {
    //竖屏
    var t=$(window).scrollTop()
    $('#hengping').hide();
    // setTimeout(function(){
    $(window).scrollTop(t+1);
    
    // },2000)
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", transverse, false);
    })();
    </script>
    
    <!-- ios 微信端出现这样问题 安卓微信测试了几台没有这个问题-->
    
    </html>

    此方法灵感来自京东移动端页面,有兴趣的朋友可以看看京东手机端的效果

    注:在手机ios升级到了11版本,这个问题就没有了,不知道11以下会不会还有

  • 相关阅读:
    基于antd封装一个高可用form组件 减少cv代码导致的bug
    写一个umi插件 自动生成代码 解放cv的双手
    jquery.validate的一个bug
    ef6+mysql的bug
    angularJS使用ocLazyLoad实现js延迟加载
    postgresql,postgis,geoserver 发布地图服务,并用.net mvc openlayers3进行显示
    EF框架操作postgresql,实现WKT类型坐标的插入,查询,以及判断是否相交
    jquery validate 之多tab页同时校验问题
    js去除空格12种方法
    个人工具清单
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/6427030.html
Copyright © 2011-2022 走看看