2

I'm trying to write CSS for iPhone 5 or similar devices with small screen height. Things are getting worse when mobile keyboard is opened and there are very few space on a screen. I want to remove few elements when page gets very short due to keyboard.

So I've tried this

@media all and (max-height: 400px) {
  display: none;
}

But element is still present on the page when keyboard pops up. And page height definitely less than 400px.

UPDATE

I'm asking because I saw few question on SO (for example here) or articles outside of SO which saying that virtual keyboard affect height or even orientation (because orientation considered portrait if height is more that width, but on smaller devices when keyboard pops up width becomes more than height and device switches to landscape mode).
Is it still actual or outdated behavior?

I've tried also

@media all and (orientation: landscape) {
    ...
}

Yes, it works when device in landscape mode. No, it does not work when keyboard pops up and height of webpage is less than its width.

Vitalii Korsakov
  • 45,737
  • 20
  • 72
  • 90

1 Answers1

2

No - Viewport size does not change when the keyboard appears on iOS.

Albeit, it puts the inputs into focus and view. Only on Android, does it change with the opening of the virtual keyboard (at least on Chrome)

In regards to your update, this answer stands. This is the current behaviour exhibited by iOS. I have tested this on iOS 12, and a Samsung S8, and they both respond as expected above.

The issue you're facing occurs because the device does not report a new viewport size if the virtual keyboard appears. It 'floats' above the browser, so the content beneath remains at the same resolution.

Levande
  • 61
  • 1
  • 7