美文网首页
mui背景图片全屏方法

mui背景图片全屏方法

作者: 不染事非 | 来源:发表于2019-07-11 14:31 被阅读0次
    .mui-content{
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(images/welcome_bg.jpg)no-repeat;
            background-size: 100%100%;
        }
    

    有输入框时不要将height设为100%(弹出输入法会压缩页面,难看),应为固定值
    HTML的height为逻辑分辨率,手机有个物理分辨率,魅族手机:物理=逻辑*3

    • 采用沉浸式状态栏
    
    mui.plusReady(function() {
                    var height1 = plus.android.invoke(plus.android.currentWebview(), "getHeight");//高度物理分辨率
                    var height2 = plus.screen.resolutionHeight;//高度逻辑分辨率
                    var top = plus.navigator.getStatusbarHeight();//状态栏高度
                    document.getElementsByClassName("mui-content")[0].style.height = (height2) + "px";
                    console.log(height1);//1920
                    console.log(height2);//640
                    console.log(top);//22
                });
    
    • 不采用沉浸式状态栏
    mui.plusReady(function() {
                    var height1 = plus.android.invoke(plus.android.currentWebview(), "getHeight");//高度物理分辨率
                    var height2 = plus.screen.resolutionHeight;//高度逻辑分辨率
                    var top = plus.navigator.getStatusbarHeight();//状态栏高度
                    document.getElementsByClassName("mui-content")[0].style.height = (height2-top) + "px";
                    console.log(height1);//1920
                    console.log(height2);//640
                    console.log(top);//22
                });
    

    相关文章

      网友评论

          本文标题:mui背景图片全屏方法

          本文链接:https://www.haomeiwen.com/subject/edxdkctx.html