0

I'm having trouble with sizing a page. I'm resizing an image based on the height of the page. I don't want any scrolling on the page however on mobile devices the address bar is interfering. Sometimes the page gets the height without the address bar and puts in scroll bars other times it gets the height with the address bar and runs fine

Is there a way I can get the height of the page with the address bar? Or force it to show? (or force it to hide?)

Eric Stotch
  • 141
  • 4
  • 19
  • 1
    Can you clarify what you mean by `sometimes the page gets the height`? – jrnxf Apr 24 '20 at 21:43
  • 1
    You could add a little javascript to update the height if the viewport size changes – R Greenstreet Apr 24 '20 at 21:45
  • 1
    Just set the image height using `vh` (viewport height) units. Also, we need to see the code that you are using to know exactly what you are dealing with. https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts – Scott Marcus Apr 24 '20 at 21:48
  • 1
    refer to this question https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile – Fatemeh Qasemkhani Apr 24 '20 at 21:54
  • @ScottMarcus: 100vh uses the height assuming no address bar which causes my problems – Eric Stotch Apr 24 '20 at 22:24
  • @coloradocolby what needs clarifying? Try your phone. The browser will hide the address bar at times and show it at other times. I need the height assuming there is an address bar but it seems theres no way to find that out. 100vh is without which makes everything useless – Eric Stotch Apr 24 '20 at 22:25
  • @RGreenstreet thats an issue it doesn't change – Eric Stotch Apr 24 '20 at 22:26

1 Answers1

1

Actually I had your problem, there are 2 ways to solve it, but they can't help you anywhere, on every browsers!!

WAY 1 : Check this has everything you need

http://www.html5rocks.com/en/mobile/fullscreen/

The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.

<meta name="mobile-web-app-capable" content="yes">

WAY 2: Using scroll and resize event on your window object to set height as same as your viewport anytime.

Milad Mohammadi
  • 176
  • 1
  • 9