Récemment je suis tombé sur un bug d'un de mes clients qui m'a laissé perplexe. Un bouton positionné sur le bas ne s'affichait pas sur certains smartphones. Mes premières réactions ont été de conseiller au client d'échanger son nokia 3306 contre un téléphone plus moderne, ensuite est venu le moment de lui demander de vider le cache (la feinte pour gagner du temps en faisant du debug live)

Honte à moi, en testant sur un iPhone ainsi qu'un Samsung A52, bim le bug est arrivé à mes yeux. Pourtant tout était clair pour moi, le container en version mobile faisait 100vh moins la taille de la box qui nous intéressait dessous, version scss:

.container-box {   ...  
  @include media-breakpoint-down(md) {
    height: calc(100vh - 150px);
  }
}

Cette manière de faire fonctionne très bien en mode desktop car le viewport est simplement la partie visible de la page web. Le drame intervient sur les mobiles ou le viewport est en fait calculé avec les barres d'outils sur l'entête et sur le footer ou la barre d'adresse. Ce qui fait que votre viewport n'est en fait pas forcément ce que vous voyez. 
Du coup les 150 pixels rétracté du 100% du viewport se trouvaient en fait derrière la barre en pied de page. 

Solution

L'unique chose a faire si nous voulons être sûr d'un résultat équivalent sur toutes les plateformes est de calculer dynamiquement en javascript la taille de la page (qui sera dans les barres d'outils), la fonction innerHeight vous renvoit un chiffre sans pixel en suffixe: 

const pageHeight = `${window.innerHeight}px`

Vous pouvez ensuite utiliser la valeur en la passant dans une variable css 

fichier css: 

::root {
  --document-height: 100%;
}

Fichier javascript:

const pageHeight = `${window.innerHeight}px`
const doc = document.documentElement
doc.style.setProperty('-document-height', pageHeight)

Mon client peut dès lors garder son Nokia 33