There are no bookmark bar and full screen problems when vue-pc is adapted to Google browser

foreword

• When we use templates for secondary development, we often encounter a problem, that is, whether there is a bookmark bar or not, and the viewport will be slightly different, which will affect the layout

• Take Google Chrome as an example, when it does not have a bookmark bar, the viewport height will be about 50px more, that is, the app-main height will be about 50px more

• The essence of this problem is that we don't know whether the user's browser has a bookmark bar and a full-screen problem, which means that there are two possibilities. we are not sure

• The solution is that we write two sets of layout codes to adapt to whether there is a bookmark bar and whether there is a full screen. The trouble is that we have to measure their viewport range values.

• Just use css media query to monitor the viewport range, but when it is found in a certain range, execute the code in this range to achieve adaptation

Reference code - take admin as an example

.content {
  overflow: hidden;
  // 正常屏幕下的上下间距
  margin-top: 35px;
  margin-bottom: 25px;
  box-shadow: 0px 0px 5px 3px #2485ab;
  // 适配谷歌火狐，没有书签栏的上下边距
  @media screen and (min-height: 950px) and (max-height: 990px) {
    margin-top: 50px;
    margin-bottom: 40px;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .baidu-map {
   // 宽度不要写死
    width: 100%;
    height: 827px;
    overflow: hidden;
    ::v-deep .anchorBL {
      display: none !important;
    }
  }

Summarize:

After this process, I believe you have a preliminary deep impression on the problem of whether there is a bookmark bar in the adapted browser on the vue-pc side, but the situation we encounter in actual development is definitely different, so we have to understand Its principle remains unchanged. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen