Bug 242167 – The behaviors of screen.width and screen.height are different between iOS and Android

• Component: CSS
• Status: NEW

[Takahiro Aoyagi]

** Problem

The behaviors of screen.width and screen.height are different between iOS and Android.

They return the screen width and height (in CSS pixels) based on (probably) the natural orientation on iOS Safari/Chrome while they do based on the current screen orientation on Android Chrome.

** Expected behavior

Ideally the behaviors should be consistent across platforms.

** Specification

The behavior on iOS Safari is same as the iOS Chrome. So I speculate the behavior on iOS comes from webkit.

The specification doesn't seem to define whether screen.width and .height should be based on current screen orientation or natural orientation.

It was discussed in the GitHub repository but no update since 2020 (because webkit/Safari devs were not involved?).

https://github.com/w3c/csswg-drafts/issues/5204

** Suggestion

I would like to suggest

1. Discuss and clearly define the behavior in the specification.
2. Add a WPT test to ensure the cosistent behavior across platforms. I already made a CL for it.

https://chromium-review.googlesource.com/c/chromium/src/+/3711440

I hope people from the webkit team join the discussion and we can move it ahead. Who are the best people in the webkit team whom I should contact? And where is the best place for the discussion? The GitHub issue?

https://github.com/w3c/csswg-drafts/issues/5204

** Additional context

I also filed an issue for Chromium

https://bugs.chromium.org/p/chromium/issues/detail?id=1338841

[Radar WebKit Bug Importer]

<rdar://problem/96572827>