---
slug: "ios-safari-software-keyboard-refresh-valid-window-height"
title: "Get the Effective Height and Width of the Browser When the Software Keyboard Appears in iOS Safari and Adjust the Layout"
description: "When compiling a Python C extension (.pyd / .so) fails due to a Python version mismatch, how to detect and switch to a compatible interpreter."
url: "https://www.ytyng.com/en/blog/ios-safari-software-keyboard-refresh-valid-window-height"
publish_date: "2023-07-16T11:02:53Z"
created: "2023-07-16T11:02:53Z"
updated: "2026-05-11T13:21:39.524Z"
categories: ["css", "iOS"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20250605/b49838cc046f41228977cf84463f7901.png.webp?width=768"
has_video: true
has_music: true
video_urls: ["https://media.ytyng.net/ytyng-blog/287/featured-video-1.mp4", "https://media.ytyng.net/ytyng-blog/287/featured-video-2.mp4", "https://media.ytyng.net/ytyng-blog/287/featured-video-3.mp4"]
music_urls: ["https://media.ytyng.net/ytyng-blog/287/featured-music-287-1.mp3", "https://media.ytyng.net/ytyng-blog/287/featured-music-287-3.mp3"]
lang: "en"
---

# Get the Effective Height and Width of the Browser When the Software Keyboard Appears in iOS Safari and Adjust the Layout

When implementing a page layout with a fixed footer, there might be cases where the layout breaks when the software keyboard is displayed on iOS.

To resolve this, I made the maximum height of the layout a CSS variable and updated it continuously in the case of iOS.

```css
:root {
  --visual-viewport-height: 100%;
}

body {
    height: var(--visual-viewport-height);
}
```

```javascript
const w = window as any;
const refreshSize = () => {
  w.document.documentElement.style.setProperty('--visual-viewport-height', `${w.visualViewport.height}px`)
  w.scrollTo(0, 0)
}
w.mobileUIRefreshInterval = setInterval(refreshSize, 300)
refreshSize()

// To clear the condition
...
clearInterval(w.mobileUIRefreshInterval)
```

# Additional Information

## There's a `-webkit-fill-available` option for calculating 100vh correctly in iOS Safari
Although it wasn't suitable for this use case, it might be useful for other purposes, so I'll note it here.

```css
body {
    height: 100vh;
}
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}
```

Reference: [Adjusting 100vh appropriately to display elements full-height on iOS](https://zenn.dev/tak_dcxi/articles/2ac77656aa94c2cd40bf)

## When the software keyboard is displayed, scrolling is forcibly enabled
Even if `overflow: fixed` is set on `body`, iOS forcibly enables scrolling when the software keyboard is displayed.

In this scenario, for a web app layout with a fixed footer, the user experience is not ideal.

There are several countermeasures, but I found that periodically executing `window.scrollTo(0, 0)` via `setInterval` is effective. Although there is a slight flickering issue when the window scrolls, it's practically stable and sufficient.