11521 sujets

JavaScript, DOM et API Web HTML5

Mode responsive mobile et navigateur téléphone portable

Bonjour à tous ,

J'ai remarqué récemment que certains de mes projets était responsive avec l'outil de google chrome mais pas du tout sur mon téléphone portable.

Exemple très simple : https://ivan-urbaczka.github.io/light-horloge/

Sur mon téléphone l'aiguille sort complètement du cadre.

Avez vous déjà eu une expérience de ce genre ?

Cordialement

Merci
Modérateur
Bonjour,

Il faut juste que ton horloge soit correctement affichée au milieu d'une page vide, ou bien il faut absolument qu'elle fonctionne au milieu de tout le bazar qui est dans ta page ?

Amicalement,
Modérateur
Bonjour,

Bon courage ! Je ne vois pas comment tout ça peut marcher à coup sûr.

Déjà, fais marcher ton horloge toute seule sur une page. Il manque peut-être juste des prefixes pour le navigateur de ton téléphone.

Une fois ça acquis, faut remettre tout le reste un par un.

Accessoirement, voici ci-dessous un code qui semble fonctionner assez largement (mais je ne peux pas garantir qu'il marche sur ton téléphone).


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Horloge</title>
<style>
@-webkit-keyframes m {
	100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes m {
	100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

body{
	margin: 0;
	padding: 0;
}

main{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 100vh;
	background: #C85E59;
}

#horloge{
	position: relative;
	border: 5px solid white;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	margin: auto;
}

#aiguille{
	position: absolute;
	width: 10px;
	height: 50%;
	background: white;
	bottom: 50%;
	left: 50%;
	-webkit-transform-origin: bottom left;
	    -ms-transform-origin: bottom left;
	        transform-origin: bottom left;
	-webkit-animation: m 60s infinite steps(60);
	        animation: m 60s infinite steps(60);
}
</style>
</head>
<body>
	<main>
		<div id="horloge"><div id="aiguille"></div></div>
	</main>
</body>
</html>


Amicalement,
Sujet clos
Aller à