PHP header(Location: ...): Force URL change in address bar

I'm currently working on a mobile site with authentication using PHP sessions with a database. I have a login page with a form that goes to server_login.php on submit. The php file then creates...

Full Screen mode in iOS7 Safari

I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in...

Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide

Sorry for a lack of example on this one, but I figure it's easy enough to understand. I have a fixed background on my site, which is currently implemented like this: #background { position:...

Preventing floating button to move on mobile when browser address bar hides

I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower...

Safari refresh prevents jQuery execution

I'm working on a Drupal 7 site, the mobile version of the site which uses Bootsrap as theme. There is a custom block (created w/ drupal) using jQuery to move some elements on a page, changing some...

CSS3 100vh not constant in mobile browser

I have a very odd issue... in every browser and mobile version I encountered this behavior: all the browsers have a top menu when you load the page (showing the address bar for example) which...

Calculating Viewport Height on Chrome Android with CSS

So I noticed that mobile Chrome calculates the address bar into the viewport height. Because of this using height: 100vh on an element doesn't work because when the address bar scrolls the...

Changing device orientation doesn't swap width and height

I'm trying to set the size of a background image to match the screen size upon window resize. The problem is that width and height don't alternate their values when I change the mobile...

Detecting the opening or closing of a virtual keyboard on a touchscreen device

I have an inelegant workaround for this issue, and am hoping that others may already have more robust solutions. On a touchscreen, tapping on an editable text field will bring up an on-screen...

Progressive Web-App Soft-Keyboard and Nav Bar overlaps in Fullscreen

UPDATE: Ok. So, this looks like another bug. I found some tickets at chromium.org stating basically the same problem. In their case they present it as a scrolling issue, since as a web-app it...

How to change the TEXT color of header bar and address bar in mobile version of browsers

Already using below meta code to change the background color of addressbar in mobile but text color remains black color for some background color. for eg: Here I am using orange color for address...

Prevent sticky footer from moving up when scrolling up in Android Chrome browser

I am developing a mobile website with angular-material which uses a fixed footer on the page. The footer is always present and fixed at the bottom. It all works well. However, when I scroll the...

Responsive design with vmin and mobile address bars

I am trying to create a number of square divs next too each other (which can expand in height if there is too much text..but most of the time there will not be too much text). I am trying to set...

Footer buttons/links become unresponsive on mobile Chrome (v67.0.3396.68 on Android)

A few days ago I discovered that footer links can become unresponsive on Chrome on Android (on iOS this doesn't happen). After a few hours of testing I managed to create an example in which this...

Clickable area of a fixed div is displaced relative to url bar scroll in mobile Chrome

I have a clickable sticky div at the bottom of the screen. It's CSS is as: .bottomFixed { position: fixed; height: 300px; bottom: 0; background-color: #CDDC39; } You...

Flutter State Management Examples

In a complex app, sometimes a Global Variable 'attached' to a widget, can be changed by some 'EXTERNAL EVENT' such as (1) A timer that run in another thread, or (2) socket.io server emit event (3)...

TWA - Digital Asset Link OK but address bar still visible

I developed a Progressive Web App and I want to publish it in the Play Store as a Trusted Web Activity. It's https://www.bagnoadriatico.it Following this...

How to "hide the address bar" on mobile in a react app?

Well I have a very simple website, the body of the site should scroll such that the address bar is no longer visible. from this topic it seems that simply calling the follwing ought to do the...

Window.scrollTo(0, 1) To hide address bar not working

I am using the window.scrollTo(0,1) trick to minimise the addressbar on mobile. I am having issues with getting it to work, I think this is because of way I have chosen to arrange my...

Receiving red-screen errors when trying to deploy react-native app to a physical android device

Description of Issue I am trying to deploy my react-native app to a physical android device for testing but when doing so, I receive a few red-screen errors. Here are the red screen errors. The...

Why does my website start behind the address bar in mobile safari?

My website goes all the way up in mobile safari, in such a way that the top part of the logo is obscured by the permanently visible address bar. What should be changed in the code for the website...

Reactjs - Hide address bar in mobile browsers (Chrome/Safari)

I am building a Web Shop with Reactjs. My goal ist to prevent vertical scrolling and only navigate with horizontal slider. Everything is working fine, here you can see the result: The height of...

Using React how to adjust Mobile Safari height with and without address bar and tabs

I have a webpage that consists of three panels: header, main and footer. In my .css file, I have successfully adjusted my webpage to fill 100% of the screen's vertical height using...

PWA - Android, iOS, MacOS, Windows Store, Chrome Add to Home Screen - Problems with multi tenancy app with multi domains

I have couple questions about generating PWA App. Maybe at the first step I explain something about app for better understanding my problems with generating app for multiplatforms. Multi Tenancy...

Fixed element height problem/jumps on mobile devices when scrolling

I've a problem with my fixed element on the bottom of my mobile device when I scroll. It looks like that the height get's re-calculated each time I scroll because the document height get's...

Blazor wasm hosted 'Could not load settings from configuration/TestApp.Client - (AuthenticationService.js)

Issue Summary Setup Boilerplate Blazor hosted wasm app with Authentication using: dotnet new blazorwasm -ho -au Individual -o TestApp I changed the default database to use MySql I ran the...

Background image resizing when the mobile browser's address bar is toggled

I have a cover with a background image: <div id="cover"></div> CSS: #cover { height: calc(60vh - 50px); height: calc(var(--cover-height, 60vh) - 50px); background: url(""); ...

How to change address bar color on mobile browsers in Gatsby.js

I would like to change address bar color for the site, which is built with Gatsby.js. All I came up with was the modification of the "siteMetadata" section in "gatsby-config.js". Does it make any...

What cause error 404 "page is not found" in mobile phone but found in desktop computer?

I've just moved from old hosting to a new hosting and also I move the domain registrar to this new hosting. My desktop version website index.html has an alternate link to index.html AMP-version...

Avoid CSS-Background-Resize by Chrome-URL-Bar-Toggle with Android

When viewing a website with Chrome for Android, the height of the view-area changes as soon as scrolling causes the URL-bar to hide. When using a fixed background image, this results in annyoing...