Problème version mobile

Bonjour,
Je me trouve face à un problème quant à la version mobile de mon site web.
Je fonctionne avec mon propre thème wordpress.

Je compte faire une version mobile à l'aide d'un fichier (souvent appelé mobile.css).
Voilà mes liens dans mon header.php.
<link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">
<link rel="stylesheet" media="screen and (orientation:portrait) and (max-width : 1200px )" href="mobile.css" type="text/css"/>
<link rel="stylesheet" media="screen and (orientation:landscape) and (max-width : 2000 px )" href="mobilepaysage.css" type="text/css"/>

Seulement, le ficher style.css marche (version ordi), mais les versions mobiles ne marchent pas..

J'ai également rentré ces liens dans les ficher css sous la forme :
@media screen and (max-width: 1200px) and (orientation: portrait) {

On m'a également conseillé de mettre 'alternate' avant stylesheet, mais ça ne fonctionne pas non plus...
J'ai également essayer de rentrer les liens vers mes fichier css mais ça ne marche pas non plus............

Est ce que quelqu'un saurait d'où vient le problème, ou alors, est ce que quelqu'un aurait une autre façon pour créer le style de ma version mobile (qui sera vraiment différente de ma version ordinateur) ?
Je ne fonctionne que très peu avec Jquery/js alors si on peut les éviter, ce serait super !

Bonjour,

est-ce qu'il y a une balise meta viewport, comme celle ici :

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Si on part de l'hypothèse où les 3 fichiers CSS sont dans le même (sous-)répertoire :
Quel est le code HTML généré pour ces 3 éléments link ? Quelque chose me dit que ce n'est pas href="styles.css" pour la 1ère mais plutôt avec un chemin devant… Chemin qu'il va falloir ajouter aux 2 autres !
Il y a get stylesheet directory uri (Codex WP) pour cela (retrouvé en cherchant le get_stylesheet_uri de votre code).

EDIT: autre manière de vérifier, ouvrir les DevTools (F12), onglet Réseau et regarder 1/ si ces 2 fichiers CSS sont appelés 2/ s'il y a des erreurs 404 ou en cherchant les CSS (pas forcément en filtrant CSS mais aussi dans les fichiers HTML…), quelle est la "Réponse". Si c'est le code HTML d'une belle page 404, problème
Modifié par Felipe (04 Nov 2019 - 17:16)

Bonjour et merci pour le temps consacré,
Effectivement j'avais bien
<meta name="viewport" content="width=device-width, initial-scale=1.0">
dans mon code (je n'avais pas shrink-to-fit=no par contre alors merci).
Pour le reste, j'avais pensé à mettre également un "chemin php" comme pour ma fiche de style principal, mais comment dois-je le rentrer pour les autres feuilles de style, afin qu'il ne les confonde pas entre elles ? , as-tu une idée d'un exemple de chemin ?
Là effectivement elles ne sont pas liés...
Merci beaucoup (et merci d'avance)

Quel est le code HTML généré pour ces 3 éléments link ? (avec Firefox clic droit / code source de la page et pour tous les navigateurs Ctrl-U ou Pomme-U)
Si les 3 CSS sont dans le même répertoire, il faut que les 3 chemins soient identiques

EDIT: Je voulais vérifier avant pour shrink-to-fit=no et c'était pour iOS 9.0 à 9.2 quand du contenu déborde du viewport mais ça fait un bail que les iPhone/iPad (iPhone 6 je crois bien) bloqués à 9.x ont pu se mettre à jour à 9.3.x (mais n'auront jamais iOS 10 et plus par contre) donc ce n'est plus super utile.
Modifié par Felipe (05 Nov 2019 - 15:47)