CODEWITHSUNDEEP
htmlcss
Weather Vane
Weather Vane

Reputation: 34575

How to find the true viewport height?

I have html content generated by php, which is designed to fit the height of the screen. To do this, I scale the content in the style spec according to vh.

This works nicely on a desktop PC, but the actual target is a mobile or cell phone, and the two browsers I have tried (Samsung and Chrome) steal some of the vh for their own header and footer.

This defeats my purpose: that the whole content can be seen without scrolling. Yes, you can scroll the header out of the way to expand the page, but I have a sequence of generated pages and this boringly defeats the object.

The amount isn't predictable. For 20 equal lines of text, 20 are shown on the Windows desktop with Firefox, and anywhere between about 16.5 and 18.5 lines on the Android screens, until you stroke it, and the amount also varies between portrait and landscape orientation.

Here is some example code to illustrate

body {
  font-family: sans-serif;
  font-size: 4vh;
  color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p {
  font-size: 1em;
  color: black;
  height: 5vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.p1 {
  background-color: lightblue;
}

.p2 {
  background-color: lightgreen;
}
<p class='p2'>1 pQHMAlldFRVc
<p class='p1'>2 GBkNDXfFzsTj
<p class='p2'>3 RPgrnVsMCSYq
<!-- skip lines 4 to 18 -->
<p class='p2'>19 ZBWbDuFKRrEM
<p class='p1'>20 DyJEHsQoiiFo

Is there a way in CSS styling to get the true height of the viewport after the system has stolen some of it? The alternative is to design the pages deliberately short, but as the amount isn't consistent between browsers, the guesswork wastes space, and might not be enough for a browser I haven't yet tried.

Upvotes: 4

Views: 755

Answers (1)

nik
nik

Reputation: 11

For Safari on iOS there seems to be -webkit-fill-available which should give You the height of the viewport without browser UI that can be scrolled away.

See: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

As Alohci here already pointed out a solution for all browsers seems to be in the works.

If JavaScript is an option You could use the value of window.innerHeight which gives You the current height available. There are many possibilities how to make us of this. Here are 2 examples for You:

  1. Set window.innerHeight as height and use display: grid for <body> + leave out height in Your p selector (every paragraph will have the same fraction of the grid's height = 5%)
  2. Set Your p selector height to a 20th of window.innerHeight

Maybe this site is also helpful to You: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Upvotes: 1

Related Questions