I am creating a web page that should exactly fill the screen on a mobile phone. This means that the page will not scroll. If the page is not scrolled, the browser address bar remains on-screen, occupying screen real-estate and conflicting with the design of the page.
I use CSS to set the height of the body to 100% of the height of the window, but height of the window is the height of the mobile screen minus the height of the browser address bar, so even if I succeed in removing the address bar (by zooming the page, scrolling, then returning to the unzoomed size) there is now a gap at the bottom of the screen that is exactly the same height as the now-hidden address bar.
Is there a way to use CSS to set the height of the page to the full height of the screen, so that:
Scrolling becomes possible
The address bar can be made to hide
The page-minus-the-address-bar will fill the screen
?
Related
When selecting gesture navigation in Samsung devices, a small black bar with three thin buttons is added at the bottom as an overlay. I'm taking a screenshot of the screen, and setting that screenshot as background on the next page. The screenshot doesn't seem to be considering the bottom bar, and when setting it as background, it tries to fill the entire screen, causing some stretching. Adding a bottom margin of the same height of the bottom bar, would solve the issue.
Is there any way to calculate that height?
I would like to know the exact device viewport height between the top bar and bottom bar on IOS, Android, Safari, Chrome, etc. Is this possible?
Top bar meaning search bar, and bottom bar meaning nav bar.
const visibleMobileHeight = viewportHeight - topBarHeight - bottomBarHeight;
I would like my application to stay between these bars no matter what, in all situations, all scenarios.
vw, vh doesnt work because that gives the entire screen size including bars.
Currently, my application is obscured by the bars, it's kind of annoying lol. If you use 100% instead of vh and vw, the application will not render. Position fixed causes a glitch when rotating, the bottom bar forces the content up and leaves an extra space at the bottom.
Example: codesandbox
Any help would be appreciated!
I'm trying to design a layout similar to LinkedIn screen for sharing an update.
When you enter the screen for the first time the layout is split something like this:
half the screen is an edittext
half the screen is a gallery of images with a bar above the gallery
Now when I click the edittext - the keyboard comes up and it's just as high as the gallery, leaving the bar with the camera icon visible.
How did they design this layout so that the keyboard height is kinda the same as the gallery height?
In fact every keyboard can have different height, so to achieve this you should resize your activity to fit current 'height' when keyboard is shown status.
Tricky part is, android doesn't provides you that current status is keyboard shown status or not, so you should manage this status smart(One tip can be comparing curent height or height/width ratio to check it's resized or not by keyboard.
I have been working on this for days now. Looking through countless articles and trying a lot of different ideas that I have had.
All I am looking to do is have a background image or element that is 100% of the browser height.
The problem is that whenever the address bar shows and hides the available space changes and the picture resizes causing an annoying jump.
I am using a full screen image slider called maximage 2 (http://www.aaronvanderzwan.com/maximage/)
First I tried to make the html or body containers aligned to the top and 120% high so that when the address bar goes away it will still cover. But the image still resizes as 120% of the new size is still different.
I have also been trying to store the original browser height and then adding to that number to compensate for the address bar and resizing the slider to the new size.
I was thinking in the way of using device aspect ratios and taking into account something that stays fixed such as the width, but this would vary from device to device and not be reliable.
Does anyone know of any simple and clean ways to simply cover the background of a mobile device with an image slider without using a percentage that will resize?
I had the same problem. The solution was to set the background hight to window height via jQuery and block the resize event while the scroll event is active.
That way you can scroll let the address bar disappear and have no nasty resize jump happen.
https://stackoverflow.com/a/31546432/1612318
I have a page that has a 100% width and height div in it (all surrounding elements are sized accordingly so that it does actually achieve 100% width and height). Below that div I have a second div with a fixed height.
In mobile safari and blackberry everything is fine, when the page loads the dimensions are applied correctly (the top div filling the viewport) and the user can scroll down to reveal the second div. Android 2.1 also applies the dimensions correctly, but with an added quirk; when the user scrolls down and removes the address bar from the page, the dimensions of the div are recalculated to fill the viewport, causing the content to jump. Ideally I would like the dimensions of the div to remain static when the page is scrolled, but remain 100% so that it will fill the viewport regardless of device size or orientation.
Does anyone know of any way to disable this recalculation?
Thanks for any help you can provide.
The only thing I can think of is to have a Android 2.1 specific negative margin the counters the address bar. Target it by user agent.