Optimisation pour mobile

Fermé
themik - Modifié le 15 oct. 2019 à 18:56
 themik - 16 oct. 2019 à 06:38
Bonjour,

Voici mon code:
<!-- Cette partit c'est pour optimiser pour le mobile et pc  -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />




<link href="style.css" rel="stylesheet" type="text/css">
<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">

  <title>Connexion</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
 </head>
 <body>
  <div class="login">
   <h1>MYG INFORMATIQUE INC.</h1>
   <form action="authenticate.php" method="post">
    <label for="username">
     <i class="fas fa-user"></i>
    </label>
    <input type="text" name="username" placeholder="Identifiant" id="username" required>
    <label for="password">
     <i class="fas fa-lock"></i>
    </label>
    <input type="password" name="password" placeholder="Mot de passe" id="password" required>
    <input type="submit" value="Se connecter ">
   </form>
  </div>
 </body>
</html>





Ma question est la suivante:
pourquoi la section qui devrais optimiser la page lorsque nous somme sur un mobile ne le fait pas comme sur mes autres pages? Il a un détail que j'ai manquer peut-être ?

Merci d'avance
Mike
A voir également:

4 réponses

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
15 oct. 2019 à 20:36
Bonjour,

Les balises meta doivent être placées dans la partie head de ta page, le chemin de la feuille de style également.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Connexion</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
 <body>
  <div class="login">
   <h1>MYG INFORMATIQUE INC.</h1>
   <form action="authenticate.php" method="post">
    <label for="username">
     <i class="fas fa-user"></i>
    </label>
    <input type="text" name="username" placeholder="Identifiant" id="username" required>
    <label for="password">
     <i class="fas fa-lock"></i>
    </label>
    <input type="password" name="password" placeholder="Mot de passe" id="password" required>
    <input type="submit" value="Se connecter ">
   </form>
  </div>
 </body>
</html>


0
bonjours,
merci pour avoir prix le temps de me répondre et j'en prend note pour éviter des erreurs de ce genre. Par contre même après ce changement, la page ne s'optimise pas pour le mobile. La boîte d'authentification reste toute petite un peu comme sur un site qui n'est pas optimiser pour les mobiles.

Merci
Mike
0
jordane45 Messages postés 38285 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 novembre 2024 4 697
15 oct. 2019 à 23:25
Bonjour,

Sans voir ce que tu as mis dans ton CSS .... difficile de te dire ce qu'il en est.
A savoir également que tu dois, à chaque modification de fichier css ou Js vider le cache de ton navigateur si tu veux être certain que les modifications soient prises en compte.

NB: Contrairement à ce que t'a dit Dugenou .. les fichiers CSS peuvent être placés en dehors des balises head. (mais doivent être soit dans le head... soit dans le body )

NB² : Les feuilles de styles sont lues dans l'ordre et la dernière chargée est prioritaire à la première...
Donc si jamais un style de ton fichier css est utilisé dans d'autre fichiers css... seul la dernière valeur sera utilisée.
C'est pour ça qu'en général.. les feuilles de styles "perso" sont placées APRES les feuilles de styles des différents plugins/framework que l'on utilise

NB3 : A moins que tu n'aies codé du css en responsive dans ton fichier css .... si tu ne sais pas le faire le plus simple est d'utiliser un framework css tel que bootstrap. Tout y est pour coder proprement un site responsive.

0
Merci, j'en apprend a tout les jours. J'ai eu l'aide d'un ami pour tout ce qui est de code je suis encore qu'un débutant, voici le fichier style.css si tu peux m'éclairer un peu je n'arrive pas a mettre le doigt sur le bobo .. :|
  • {

box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #1a1a1a;
}
.login {
width: 400px;
background-color: #f2f2f2;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #b30000;
color: #ffffff;
}
.login form input[type="Password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #b30000;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #990000;
transition: background-color 0.2s;
}
0