I tested this odd behavior on new Pixel 7 Pro(Android 13) using chrome browser(110.0.5481.65).
Test:
I created a simple app that prints out window.innerWidth and window.innerHeight to the screen. I also experienced this behavior using this webpage (https://www.rapidtables.com/web/tools/window-size.html), (Disclaimer: not hosted by me)
on initial load without any user interaction when i enter the address and visit the site using Mobile Chrome on Android device (Pixel 7pro) the dimensions are 412x1101.
on interaction(tap or click refresh) it is 412 x 775
and upon scroll as expected the address bar hides and the dimensions are 412 x 831.
Issue: Why is the initial height 1101 ? I would expect it to be 775 and on scroll when the address bar hides to be 831
UPDATE:
Upon further testing it seems this only occurs when i type the url directly in to address bar and click go. If i open the url link through QR scan or clicking on a link tag the innerHeight is as expected. Very Strange
Related
I am developing a web game using Phaser and i want the game to be in fullscreen mode. Since in iPhone it is not posible to go fullscreen mode, the bottom part of the game canvas is not visible because of the address bar. in android browser this is working fine because it allows to go fullscreen mode
I was trying to hide the address bar so that the game canvas will be fully visible, is there a way for me to hide the address bar in ios browser.
or Is there a way for me to get the address bar height so that I can substract that with the game canvas height to fit it in the view port
I have a webapp that is running in the chrome web browser on Android.
I want to lock the orientation to landscape.
I tried several options according to this tutorial:
using ScreenOrientation.lock(), which is experimental.
The example code here does not work in my mobile phone (Pixel3, Android 11) - when the device is rotated, the orientation changes.
I also tried a CSS trick, which rotates the screen by 90 degrees, if it detect that the device is in portrait mode.
The screen is rendered in landscape mode in the simplified example, but the functionality of the real application is broken. For example, when moving the finger in the x direction is interpreted as moving in y direction.
Other tries also failed on my Pixel3 phone in Chrome in Android (when rotating the device the orientation changes)
I am able to lock the orientation by installing the page as a PWA "Add to Home Screen" and using a manifest with
cat manifest.json
"display": "standalone",
"orientation": "landscape",
But this requires that the user installs the app as a PWA
I want to lock the orientation of the webapp while it is running in the regular browser.
Is this possible?
Thanks
The best bet you could do is generate a simple popup that disallows input, ie; covering the screen. Then use the following code [which can be better fine-tuned] to detect if the user is in portrait or landscape mode.
setTimeout(() => {
if(window.innerHeight > window.innerWidth){
document.body.getElementById('custom-popup').classList.add('show');
// Obviously you'd have to make a popup that is visible when the class 'custom-popup` is added.
} else {
document.body.getElementById('custom-popup').classList.remove('show');
// The user switched to landscape presumably
}
}, 3000);
I'm developing an online store with webview. However, every time a text area was selected, the android keyboard started and rescaled the application disproportionately. I followed some tips given in the forum, entered the code
android:windowSoftInputMode="stateVisible|adjustPan"
and managed to solve the problem, but now, the keyboard starts and I can not see what is being typed. The image below, shows how the webview is behaving.
How can I make the app to scroll to the top of the keyboard?
I am developing browser games that have only one full-size canvas element in body.
When run these games in iOS9.2(iPad) Chrome(Ver 47.0.2526.107), the bottom area of game screen is not shown. (It didn't happen several months ago. Even now this neither happen in Safari, nor Android 5.0.2 Chrome 47.0.2526.83)
These game programs first calculate size of window (the area showing html document when address bar is shown), and places a canvas element having the size.
Since some version of Chrome, the "size of window" is interpreted as the size of window when address bar is NOT shown.
I tried to get the height of window by:
screen.availHeight
window.innerHeight
$(window).height()
document.documentElement.clientHeight
document.height
$(document).height()
but they all returns the same value, the height when address bar is NOT shown.
Test code is shown in http://jsrun.it/hoge1e4/4Ygq I want to know the value of the scale at bottom of the screen when address bar is shown.
(see picture)
The problem seems to be solved by version-up.
I checked it on ver.49.0.2623.73
I want to hide the URL bar from my single-page application by using JavaScript.
I tried to set bigger height of the 'body' element and then perform:
window.scrollTo(0, 0);
But it doesn't work. The URL bar is still visible. How do I solve this problem?
so far it seems it doesn't work on iOS 9, it stopped working after iOS 7.1.
As seen here:
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
For iPhone, you can make your content just one pixel higher than the viewport, that will eliminate the navbar.
Working code example: http://pastebin.com/16s8Xvbw
Caveats:
Only works in landscape, and when flipping from portrait to landscape - if user enters the page in landscape, he/she must flip to portrait and back to landscape.
If the user touches near top / bottom, navbar will re-appear.
Does not work on iPad at all.