[Résolu] Largeur de <div>

Bonjour et bonne année à tous
J'ai ajouté un message à la page d'accueil de https://www.alma-musica.net avec

.message.active {
		display: table;
		background:lightyellow;
		color:black;
		width:60em;
		max-width:60vw;
		padding:1em;
		border:1px solid gray;
		border-radius:0.5em;
		position:fixed;
		top:2em;
		left:50%;
		transform:translateX(-50%);
		text-align:justify;
		z-index:1000;
	}

Sur Safari/iOS tout se passe comme si la directive max-width:60vw; n'était pas prise en compte: le message prend toute la largeur de l'écran (et même plus)
Une idée pour contourner ce problème?
Merci de vos conseils

Et l'eau,

Quels sont les intérêts de mélanger les unités de mesure, d'un texte justifié, d'un display table, d'utiliser le em (dans le cas de width) ?

Merci de ta réponse. Je vais changer le display

Je confirme que display:block fonctionne sur mon iPhone

niuxe a écrit :
Et l'eau,

Quels sont les intérêts de mélanger les unités de mesure, d'un texte justifié, d'un display table, d'utiliser le em (dans le cas de width) ?

Réponses:
1) div.message est un conteneur. Son contenu varie d'une version à l'autre, il peut donc contenir n'importe quoi.
display:table c'est s'assurer qu'il s'ajustera à son contenu quel que soit le contenu

2) Le site est rendu responsive par

@media screen and (max-width:1024px) {
	html {font-size:1.7vw;}
}
@media screen and (max-width:705px) {
	html {font-size:12px;}
}

C'est à dire que la taille des caractères varie entre 12 et 17px. Exprimer les tailles en em permet d'assurer une bonne homogénéité entre texte et conteneurs.

3) max-width en vw permet d'éviter que le message déborde de l'écran

4) text-align:justify; parce que par défaut les <div> sont en text-align:left mais ici je tiens à ce que le texte soit justifié

J'avoue que moi aussi j'ai tendance à mixer des unités de mesure fixes et des unités liées au viewport pour les mêmes raisons que Papy. Et c'est très efficace.
Modifié par Olivier C (02 Jan 2021 - 08:56)