Screen.width et screen.height faux?

Fermé
Dany - Modifié le 5 déc. 2022 à 15:37
 Dany - 9 déc. 2022 à 20:00

Bonjour

J'affiche du texte dans une div placés au coin inférieur gauche de l'écran.

En portrait, ça  s'affiche presque au milieu de l'écran.

En paysage, ça s'affiche en dehors du cadre de 'body'.

Note: j'ai essayé sur 2 écrans différents, le résultat est similaire.

Où est mon erreur?

Comment faire?

<html>
  <header> 
<link rel="stylesheet" type="text/css" href="corner.css" />
</header>
<body>

<script>
 
adiv = document.createElement('div') ;
adiv.id = "corner" ;

adiv.style.left = screen.width ;
adiv.style.top = screen.height ;


adiv.innerText = 'CORNER' ;


document.body.appendChild (adiv) ;

</script>

</body>

</html>
body
{
  border: 1px solid black ;
}

div
{
  position: absolute ;
}

1 réponse

Salut en utilisant window.innerWIdth et pareillement avec window.innerHeight pour la hauteur ça donne quoi?

Sinon vous pouvez toujours essayer screen.availWidth mais mieux de passer par l'objet Window selon moi.

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

ps: le coin inférieur gauche en css c'est {position:absolute;top :100%; left:0;} et donc invisible à l'écran puisque il n'y a pas les dimensions du div prises en compte. Pour le voir il faut top-hauteur bloc, left-largeur bloc...

0

J'ai essayé sur mon smartphone et ma tablette en paysage et portrait.

Smartphone : OK en portrait, KO en paysage. 

Tablette: OK en paysage, KO en portrait.

Par chance, les configurations correctes sont les + utilisées. Mais bon ça ne garantit pas que ce sera OK sur d'autres appareils.

0