1486 sujets

Web Mobile et responsive web design

Pourquoi mon lien vers ma feuille CSS n'est pas pris en compte

Bonjour, je voudrais que mon site soit lisible et sur les PC et sur les mobiles.
J'ai donc commencé à travailler sur du responsive site mais rien à faire il semblerait que la déclaration de la feuille de style CSS ne soit pas prise en compte avec "screen and (max-device-width: 480px)", car dès que je mets uniquement "screen", ça fonctionne...
Quelqu'un pourrait-il m'éclairer
merci

je mets le début de ma page en paste

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

...

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="/structure_mobile.css" />

</head>
Modifié par Nayacyr (06 Apr 2013 - 13:42)
Hello,

sur quel terminal testes-tu ? Es-tu sûr que ton appareil fait bien moins de 480px de large ?

Pour t'en convaincre, remplace le max-device-width par max-width.

Ju
Salut,
Je teste sur un BlackBerry. mais ça ne marche pas plus avec max-width, c'est comme si le and (...) bloquait le lien vers la CSS.

merci
Bonjour, ce ne serait pas plutôt max-device-width = 480px
Modifié par Philivert (06 Apr 2013 - 11:15)
Administrateur
Merci d'éditer le titre du sujet pour en indiquer un plus pertinent (rappel : si tout le monde intitulait ses sujets "pourquoi ça ne marche pas" ou "question", on ne s'en sortirait plus)
dew a écrit :
Merci d'éditer le titre du sujet pour en indiquer un plus pertinent (rappel : si tout le monde intitulait ses sujets &quot;pourquoi ça ne marche pas&quot; ou &quot;question&quot;, on ne s'en sortirait plus)


Ou "problème ie" Smiley lol
Modifié par jb_gfx (06 Apr 2013 - 13:16)
Re salut,
j'ai testé avec screen and (max-device-width = 480px)... aucune prise en compte de la feuille de style non plus...
Quelqu'un aurait-il une autre idée? j'ai beau éplucher les tutoriels et les articles de référencees je ne comprends toujours pas où est le soucis
Merci
Bonjour,

essayez avec cette syntaxe :only screen and (max-width: 480px) pour voir et à défaut mettre un lien vers votre page.
Bonjour, même problème et je me casse la tête depuis des heures, le blackberry ne "'lit" pas le css après le and semble-t-il, j'ai testé tout ce que j'ai pu et rien ne fonctionne sous ce fichu blackberry, pourtant les émulateurs en ligne renvoient le résultat escompté à chaque fois... ? Pourquoi que ça bugge sous blackberry ?

Voici le lien de mon site http://www.les-echecs.com/differe/

Merci de votre aide !

Luc.
Il y a plusieurs problèmes dans votre syntaxe:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 360px)" href="style.css">

ce n'est pas l'idéal (vous pouvez les supprimer)

Il vaut mieux placer vos média queries dans votre feuille de style css(qu'il faut appeler une seule fois) directement du genre:
@media only screen and (max-width: 480px)


Et puis concernant l'import de votre css je vous conseille cette lecture :n'utilisez par @import
au lieu de:
<style type="text/css">@import url('style.css');</style>

faire:
<style type="text/css">href="style.css"</style>
a écrit :
<style type="text/css">href="style.css"</style>


excuse moi rodolphe mais cette syntaxe ne fonctionne pas chez moi (pourtant j'ai fait une déclaration doctype html5)...

tu voulais pas plutôt écrire : <link rel="stylesheet" href="habillage.css" type="text/css"/> ? Car avec cette dernière syntaxe ça fonctionne sur les navigateurs pc (mozilla,ie,chrome,safari...), même si ça ressemble à du xhtml !
Il n'y a pas l'équivalent en html5 ? Je ne trouve rien dans ton bouquin là-dessus mais il se peut que je cherche mal !

Il semble que seul blackberry aie ce type de problèmes car avec les émulations en ligne ça fonctionne correctement sur tous les mobiles. Ces émulations sont-elles fiables (ici par exemple -> http://www.emulateurmobile.com/ )?

Comme expliqué par la personne qui a écrit ce topic, blackberry ne "lit" pas la feuille css, il donne le rendu html seulement...

Le problème semble effectivement provenir du and :
@media only screen and (min-width: 768px) and (max-width: 9768px) {

Effectivement sans ces and suivis leurs valeurs associées, avec juste "screen", l'affichage prend en compte cette fois-ci le css... A n'y rien comprendre cette histoire !

Je doute qu'on résolve ce problème. On dirait un bug de chez blackberry ou du navigateur mobile tout simplement !
Ah je suis content parce que j'ai le même type de problème.

Manifestement, il y a une différence notable entre la théorie et la pratique : en théorie, donc, mon site s'affiche nickel quand je me contente de réduire la fenêtre de mon navigateur, ou de tester sur des simulateurs de smartphones, type http://ipadpeek.com/.
En pratique, ça ne va plus du tout. Je regarde sur un "vrai" iphone, ou un smartphone android, la feuille de style ne veut pas être prise en compte. Ça m'agace, mais à un point...

Voici ce que je déclare.

Dans les metas : 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">

Et le lien vers la feuille de style :
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 900px) and (orientation:landscape)" href="styles/styles_min480.css" type="text/css" />


Est-ce que j'ai oublié un détail ? Mal écrit qquechose ? C'est vraiment le seul format qui me pose problème, j'ai des feuilles de style pour résolution supérieure, ou pour tablette, tout va bien.
Il n'y a que sur téléphone qu'il ne veut pas entendre parler de ma feuille de style...
Bonjour,

Je regrette mais je ne vois pas votre déclaration de viewport n'y votre feuille de style dans le HEAD du site. Smiley ohwell
rodolpheb a écrit :

Je regrette mais je ne vois pas votre déclaration de viewport n'y votre feuille de style dans le HEAD du site. Smiley ohwell

Euh...
Dans le head de quel site ???
Zut j'ai cru que vous aviez mis votre site en ligne.... Smiley smile

Vous pouvez peut-être mettre votre site en ligne donc, pour y voir de plus prêt....
Je veux bien (ici), mais comme je disais, le problème ne vient pas des css (encore qu'il y aurait sûrement beaucoup à redire), mais de la déclaration de la feuille de style, puisqu'aucun style ne s'applique.

De toutes façons, j'insiste encore un peu, et après je repars à zéro pour qquechose de plus "traditionnel", uniquement pour la version téléphone. Le responsive design avec un site principalement monté en position absolue, c'est l'enfer sur terre...

(correction du lien)
Modifié par Ralf (13 Apr 2013 - 18:54)
Le lien est mort... Smiley decu

edit:
Ralf a écrit :
c'est l'enfer sur terre...

+ votre avatar = vous me faites peur Smiley lol
Modifié par rodolpheb (13 Apr 2013 - 18:51)
Sujet clos
Aller à