Conflit entre media "screen" et "mobile"

**KREEN1978** · 26/11/2014, 11h56

Bonjour !!

Je réalise un site, et la version "screen" et correcte et fonctionne bien. Il faut maintenant que je l'adapte en version mobile et j'ai choisi de faire ça avec deux feuilles de styles différentes.

Mais en fait j'ai l'impression que ma feuille de style "screen" perturbe ma feuille de style "mobile"... Je les ai déclaré comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<meta name="viewport" content="width=900px"/>
<link rel="stylesheet" media="screen and (min-width:900px)" type="text/css" href="css/css-screen.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" type="text/css" href="css/css-mobile.css" />

J'ai résolu certains trucs quand même mais y a encore des choses qui ne fonctionnent pas...

Est-il possible d'annuler les propriétés css "screen" pour ma version mobile ?

Je voudrais que l'affichage mobile soit "brut", c'est à dire partir de ZERO ???

Sinon, pour être claire je veux qu'un SELECT soit différent pour la version mobile et écran : eh bien là rien à faire, mon css ordi domine !!

En dernier recours, j'ai fait ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<select id="mobile" class="input-recherche"  name="requeteSpecialite" onsubmit="verifSpecialite(this)";>

.....

et je tente d'attribuer l'id pour la css mobile et la class pour la version ordi... Mais ça ne fonctionne pas...

Voici les codes css :

Mobile :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
[id="mobile"] {
    width:800px;
    height:100px;
    font-size:200%;
}

Screen ordi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.input-recherche {
    display:block;
    height:42px;
    width:300px;
    border-radius:12px;
    border:1px solid;
    border-color:#989797;
    background-color:#dcdbdb;
    padding-left:20px;
    font-family:arial;
    font-size:14px;
    font-style:italic;
    vertical-align:20px;
    margin-right:10px;
}

Mon but : que la taille version mobile soit celle définie dans la css mobile...

UN VRAI CASSE TETE !!!

Qui a une idée ???

PS : en plus j'ai plus trop de temps pour solutionner tout ça... SNNIIIFFF !!!

**stephweb** · 28/11/2014, 00h21

Bonsoir,
je crois que pour mobile c'est faut éviter screen . Screen c'est pour les écrans "classiques".

ça serai + ceci à insérer dns la feuille CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@media all and (max-device-width: 480px)
{
ici quelques réglages pour adapter le site pour Tel mobile
}

Les Tel mobiles on un comportement par défaut d'afficher le site 1200px (en comportement), donc pour éviter ceci, il fut ajouter dans dans ta balise meta HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<meta name="viewport" content="width=device-width,initial-scale=1" />

c'est comme ceci que je procède de mon coté.
bonne chance

**chris188** · 08/01/2015, 16h53

Perso, j'utilise une classe en php qui détecte le type d'appareil (phone,tablet,pc), et dans le <head> j'inclus ou pas le style associé :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
require_once 'class-mobile-detect.php'; $detect = new Mobile_Detect;
$deviceType=($detect->isMobile()?($detect->isTablet()?'tablet':'phone'):'computer');
$bpc=($detect->isMobile()?($detect->isTablet()?0:0):1);
$bphone=($detect->isMobile()?($detect->isTablet()?0:1):0);
$btablet=($detect->isMobile()?($detect->isTablet()?1:0):0);
 
$head.='<link rel="stylesheet" type="text/css" href="Reset.css" media="screen">';     // base pour tous les sites
$head.=iif($bphone==0,'<link rel="stylesheet" type="text/css" href="Style.css" media="screen">','');  // style du site en question (avec mediaqueries)
$head.=iif($bphone==1,'<link rel="stylesheet" type="text/css" href="StylePhone.css" media="screen">',''); // style pour phone (avec mediaqueries aussi)
$head.='<link rel="stylesheet" type="text/css" href="Plug.css" media="all">';   // styles de tous les plugins 
$head.=iif($bphone==0,'<link rel="stylesheet" type="text/css" href="Print.css" media="print">','');  //  et pour imprimer (rarement utilisé, pourtant c'est important)
echo $head;

le but de ceci est de n'avoir qu'un contenu pour google, pas de redirections pour mobiles

Mobile Detect se trouve ici : http://mobiledetect.net/

**KREEN1978** · 19/01/2015, 17h20

Ah super !!
merci pour l'info !! je ne connaissais pas !!
je l'utiliserai pour mes projets futurs

Conflit entre media "screen" et "mobile"

CSS

Partager

Partager