useWindowSize Resize detection on mobile devices

[ryoji-sagara]

Describe the bug

Prerequisite :

In index.html

<meta name="apple-mobile-web-app-capable" content="yes" />

Set and "Add to Home" state.

Issue

I used useWindowSize for reactive window size detection.

import { watch } from 'vue'
import { useWindowSize } from '@vueuse/core'

const { height } = useWindowSize()
watch(height, () => {
  console.log('Change WindowSize!', height.value)
})

I used useWindowSize to detect not only the resize event, but also the
I think we should add an orientationchange event as well, since it is possible to detect changes by binding an orientationchange event as well.

I'm not sure I've covered all the features of Vueuse, so if there is another way to do it, I'd appreciate it if you could let me know.

Reproduction

none

System Info

iPhone safari

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[JMaylor]

Could you combine with useScreenOrientation?

e.g.

import { watch } from 'vue'
import { useWindowSize, useScreenOrientation } from '@vueuse/core'

const { height } = useWindowSize()
const { orientation } = useScreenOrientation()
watch([height, orientation], () => {
  if (window) console.log(window.innerHeight)
})

[ryoji-sagara]

@JMaylor
Thanks.
In my case, I can use useScreenOrientation and it will be fine.

However, I am concerned that the height of useWindowSize does not change reactively when the device is rotated, which may be a bug for development users.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CodyBontecou]

@JMaylor Thanks. In my case, I can use useScreenOrientation and it will be fine.

However, I am concerned that the height of useWindowSize does not change reactively when the device is rotated, which may be a bug for development users.

I'm running into this. These are outputting different amounts:

watch(orientation, () => {
  console.log("width: ", windowWidth.value, "height: ", windowHeight.value);
});

watch(windowWidth, () => {
  console.log(
    "windowWidth: ",
    windowWidth.value,
    "height: ",
    windowHeight.value,
  );
});