RTSP协议视频智能分析平台EasyNVR移动端登录页适配问题优化

很多用户都问我们，如果使用TSINGSEE青犀视频云边端智能分析平台，比如EasyNVR、EasyGBS等，除了可以在PC端登录播放外，是否能够在手机端登录、配置以及播放。TSINGSEE青犀视频全线产品一直都存在手机的适配版本，满足了手机用户的需求。

但是视频智能分析平台EasyNVR等产品，主要还是用于PC端，因此在移动端的适配上偶尔会出现一些问题，iOS和Android系统的不同，也对适配带来了一些困难。

比如EasyNVR在苹果X上进行适配使用的时候，login页面就会出现适配不了，无法全部展示的问题。

pc端和移动端主要的区别在于页面的宽度和高度，因此我们只需要在监听页面的宽带高来做不同的样式就可以。

借助css3的@media 媒体查询方法来监听网页宽高进而渲染不同的css样式

@media screen and(max-width:480px) {
  .elrow {
    width: 100%;
    height: 100% !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
  }
  .panel-fotter {
    position: absolute !important;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
  }
  .el-col {
    width: 100% !important;
  }
  .login-container {
    display: flex;
    justify-items: center;
  }
  .login-container .formBox {
    background-color: #f5f5f5 !important;
    padding: 0px !important;
    max-width: 300px;
    margin: 0 auto;
    .form-control {
      background-color: #f5f5f5 !important;
    }
  }
}

完成效果如下图：

TSINGSEE青犀视频云边端架构视频智能分析平台手机适配版可以进行相关配置、播放等操作，但是仍然需要我们不断完善的。有需要的用户可以联系我们了解，TSINGSEE青犀视频云边端架构智能分析平台均支持试用，欢迎大家测试。