Question

Im making a web page that has a ‘fullscreen mode’. Its a normal web page until you click a button and then a div is created that has 100% height and width, and the old content is hidden. The fullscreen mode provides another button to return to non fullscreen mode, which hides the div and unhides the original content.

This works fine except that I also want to hide the browser chrome with this JavaScript method:

        setTimeout(function() { 
        window.scrollTo(0, 1) }, 
        100);

The JavaScript scrolls down the page enough so the browser chrome is no longer visible. The problem is this requires the page to be taller than the viewport so its able to scroll. If the content has a height of 100%, this cannot happen.

My current workaround is to to add a padding of 70px to the bottom of the fullscreen div. This works fine for the iphone, but then this unnecessary spacing is added to all devices. This may break the fullscreen effect I want in some, and creates unnecessary scroll bars in dektop browsers.

Is there a smart work around? Or do I need to detect the browser chrome height or get it from detecting the device, and add this padding accordingly?

Thanks

Answer 1

The best way is to write dedicated css for devices and their orientation.

You can see the media queries to detect the orientation of the devices ans set the css according to that.

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

To hide bar use this script:

if (navigator.userAgent.indexOf('iPhone') != -1) {
        addEventListener("load", function() {
        setTimeout(hideURLbar, 0);
        }, false);
        }

        function hideURLbar() {
        window.scrollTo(0, 1);
        }