We Keep Coding

Site doesn't hide address bar when scroll down in mobile browsers on Android

I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?

Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)

JS/PHP automatically enter desktop version on mobile

So I've been working on a website for quite some time now and I have many elements that simply don't work with phones but I've noticed if I use the option desktop version everything is scaled and centered correctly. Now I want all my users to automatically check this option via javascript or something until I get the mobile version of the website working.
I'm not a pro, so please keep the answers simple. Thanks!

Use media queries for that. There is a nice MDN Web Docs page that you can check. To check if you're on a phone you can use the max-width CSS property.
Example:
If the browser window is 500px or smaller, the background color will be lightblue
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Hope I answered your question.

I explained it poorly. What I was trying to do is enable the checkbox in the mobile browser's menu that requests the desktop version of the website.
Instead, I have now improved my CSS skills and can make websites behave correctly on lower DPI devices.

CSS/JavaScript - Mobile JavaScript stops working under 771px

I have very strange problem.
I am developing mobile version to my website and i have very strange problem.
When i open my page with mobile that is having screen height over 770px everything is working well. So when i open it with 771px it's works.
But if i change the screen height to 770px the javascripts is not working any more.
First of all i found all #media only screen and (min-width: 771px) { rules in my CSS files and replaced them to #media only screen and (min-width: 350px) { but even with that change it is not working.
I've searched for any occurence of 770 or 771 in all my CSS files and style rules and there is none like that, but still the javascript is not working.
Here is my complete javascript: http://pastebin.com/HJyDrVYd
Here is my complete css: http://pastebin.com/M3Cu5qfF
Here is my HTML output of the page on which i have this problem: http://pastebin.com/CBgedJmZ
I run out of suggestions from where the problem may come and why the mobile version have working js with screen height 771px or higher but not lower.
Can you give any suggestion and help ?
Thanks in advance!

Smaller window size causing cut off content

I am trying to design a new website for myself but coming across some big problems when trying to make it compatible with smaller devices.
When running the website at larger resolutions and everything looks fine, until you start to drop it down to mobile and some tablet sizes. When the window becomes smaller, I lose content at the bottom of my website, the scroll bar does not go any further. I can kind of fix this but then I get a horrific horizontal scroll bar that is filled with no content.
See image: http://i.stack.imgur.com/98ZzF.png
I have tried using all the overflow methods but still cannot find a fix.
Link to website so you can view for yourself: Website

overflow-x should fix your issue.
body{
overflow-x:hidden;
}

Dynamically edit img src based on device orientation with JS or JQuery

I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.

Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.

OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.