javascript 手机上的视口单元

Posted 2021-05-03

# Source: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit)
const vh = window.innerHeight * 0.01
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`)

/* To correct display height for mobile */
/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
.header-background {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  
  /* For mobile and landscape not use 100vh */
  @media screen and (orientation:landscape) {
    height: auto;
  }
  
  @media (min-width: $min-width-tablet) {
    height: auto;
  }
}

<script>
export default {
  data() {
    return {
      scrolled: false
    }
  },
  mounted: function () {
    // To correct display height for mobile
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
      this.displayCorrectHeightForMobile()
      window.addEventListener('resize', () => {
        this.displayCorrectHeightForMobile()
      })
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.scrolled = window.scrollY > 0
      const headerBackground = document.querySelector('.header-background')
      const offsetHeight = headerBackground.offsetHeight
      if (this.scrolled) {
        headerBackground.style.height = offsetHeight + 'px'
      }
    },
    displayCorrectHeightForMobile() {
      if (!this.scrolled) {
        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit)
        const vh = window.innerHeight * 0.01
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty('--vh', `${vh}px`)
      }
    }
  }
}
</script>