I am a web developer from China (English may be a bit awkward).
I used outerWidth and outerHeight, innerWidth and innerHeight to differentiate between Android and PC in order to unify the webpage background div.I wish Firefox Android's outerWidth and outerInner made more sense.
I found a thing when I test the website on my Win11 computer. And the following test is defaulted to horizontal screen of computer and vertical screen of cell phone.
after Firefox dev press the maximize button, the difference between outerWidth and innerWidth is 9.
after press the restore button again, the difference between outerWidth and innerWidth will be between 7 and 9.
But after maximizing chrome dev, outerWidth and innerWidth are equal. After pressing the restore button again, the difference between outerWidth and innerWidth will be between 14 and 16.
Of course, I understand the difference between the values outerWidth and innerWidth in JS. But testing on Android has revealed a similar problem.
First, by default the address bar in Android browsers appears/disappears with a swipe.
On this basis, the difference between outerWidth and innerWidth in Firefox Android is 3. The difference between outerHeight and innerHeight after the address bar appears is 63! The difference after the address bar disappears is 8.
Chrome, on the other hand, circumvents this problem, and the address bar appears/disappears with the values of innerWidth, innerWidth and innerWidth, innerWidth and innerHeight are equal.
It doesn't really matter that there is a difference in the PC values, it's mainly on the Android side. If the address bar is hidden, then the outerHeight and innerHeight should be equal. But Firefox Android is not equal.
