雅安论坛

标题: mui图片响应式全屏自适应方法含代码 [打印本页]
作者: 匿名    时间: 2021-8-14 08:56
标题: mui图片响应式全屏自适应方法含代码
  1. .mui-content{
  2.                 position: absolute;
  3.                 width: 100%;
  4.                 height: 100%;
  5.                 background: url(images/welcome_bg.jpg)no-repeat;
  6.                 background-size: 100%100%;
  7.         }
复制代码

有输入框时不要将height设为100%（弹出输入法会压缩页面，难看），应为固定值

HTML的height为逻辑分辨率，手机有个物理分辨率，魅族手机：物理=逻辑*3

采用沉浸式状态栏

  1. 采用沉浸式状态栏

  3. mui.plusReady(function() {
  4.                                 var height1 = plus.android.invoke(plus.android.currentWebview(), "getHeight");//高度物理分辨率
  5.                                 var height2 = plus.screen.resolutionHeight;//高度逻辑分辨率
  6.                                 var top = plus.navigator.getStatusbarHeight();//状态栏高度
  7.                                 document.getElementsByClassName("mui-content")[0].style.height = (height2) + "px";
  8.                                 console.log(height1);//1920
  9.                                 console.log(height2);//640
  10.                                 console.log(top);//22
  11.                         });
  12. 不采用沉浸式状态栏
  13. mui.plusReady(function() {
  14.                                 var height1 = plus.android.invoke(plus.android.currentWebview(), "getHeight");//高度物理分辨率
  15.                                 var height2 = plus.screen.resolutionHeight;//高度逻辑分辨率
  16.                                 var top = plus.navigator.getStatusbarHeight();//状态栏高度
  17.                                 document.getElementsByClassName("mui-content")[0].style.height = (height2-top) + "px";
  18.                                 console.log(height1);//1920
  19.                                 console.log(height2);//640
  20.                                 console.log(top);//22
  21.                         });

复制代码


版权声明：本文为CSDN博主「m0_37986841」的原创文章，
原文链接：https://blog.csdn.net/m0_37986841/article/details/78496292






欢迎光临 雅安论坛 (https://www.yaanbbs.net/) Powered by Discuz! X3.4