Problème affichage mobile html

25 mars 2020 à 23:45:45

Bonjours, j'ai créer un site web sur pc et il marche a merveille mais je voulais créer une version mobile. Pour cela j'ai rajouté cette ligne entre <head> et </head> :

<link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />

Donc cela donne :

<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />
        <title>EC20</title>
</head>

J'ai créer les 2 fichiers css :
style.css

html {
background: url(fondbleuvert.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

mobile.css

html {
background: url(fond.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

La seul chose qui change est l'image du fond. Mais j'ai testé sur un iphone SE sur chrome (ecrand de moins de 480px) et le site m'affichait l'image du script "style.css" alors qu'il devait m'afficher l'image du script "mobile.css".

Je suis vraiment confus. Pourriez vous m'aider. Un grand merci d'avance !

AbcAbc6

26 mars 2020 à 1:33:20

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème affichage mobile html)

Liens conseillés

Règles générales du forum

Bonsoir, il te manque la meta viewport

Lire :

PS : background-size n'a plus besoin d'être préfixé voir https://caniuse.com/#feat=mdn-css_properties_background-size

-
Edité par AbcAbc6 26 mars 2020 à 1:38:01

ArthurClot

26 mars 2020 à 17:22:24

Merci beaucoup je vais tester ça..

AbcAbc6

26 mars 2020 à 17:31:17

Bonjour, n'oublie pas de modifier le titre de ton sujet. (Pas de "problème" dans le titre)

-
Edité par AbcAbc6 26 mars 2020 à 17:31:45