1485 sujets

Web Mobile et responsive web design

[Résolu] Modifier la police pour les mobiles

Bonjour,

J'ai fait une page web qui est aussi bien accessible par le web que par mobile grâce à deux CSS: un pour le web (media ="screen") et un pour mobiles (media="handheld").
Tout fonctionne parfaitement, sauf une chose: j'aimerais changer la taille de police d'un de mes paragraphes pour les mobiles, mais ça ne marche pas.

Voici mon code HTML:

<body>
  <div id="main">
    ...
    <div id="bulle_msg"><p id="msg_exp">Etiam gressus: inmanium vertices scandere valido valido summos et per fruticeta ponderum fortiter aliquotiens etiam firmare hoste valido vertices tamen.</p></div>
    ...
  </div>
</body>


Code CSS:

@media handheld and (max-width: 640px) {

#bulle_msg p#msg_exp
	{
		font-size: 17px;
	}
}


La police de ce paragraphe est normalement de 13px.
Quand je mets ce code CSS pour mobiles, la police reste à 13px au lieu de se mettre à 17px.

Comment ça se fait?
Le media query n'est pas correct (handheld représente principalement des vieilles versions d'Opera Mini d'avant les smartphones). Regarde le code css de mon site. Smiley cligne
Modifié par Patidou (03 May 2012 - 14:05)
Modérateur
Pour pinailler, handeld est correct au niveau de la spec css, mais la plupart des navigateurs de smartphones ont décidés de se considérer comme screen. ( probablement afin d'éviter de recevoir le contenu partiel de site que recevait un vieux mobile. ).

C'est donc correct dans la normes mais pas dans la pratique,
Bon, j'ai donc modifié handheld par screen et j'ai toujours le même problème.

Voici mon code CSS en entier (pour mobiles):

@media screen and (max-width: 640px) {
	body
	{
		width: auto;
		margin: auto;
		padding: auto;
	}
	
	img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video 
	{
		max-width: 100%;
	}
	
	img
	{
		height: auto;
		width: auto;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	
	textarea, table, td, th, code, pre, samp {
	{
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}
	
	code, pre, samp
	{
		white-space: pre-wrap;
	}
	
	.hide_mobile
	{
		display: none !important;
	}
	
	body:before
	{
		content: "Version mobile du site";
		display: block;
		color: #777;
		text-align: center;
		font-style: italic;
	}
	
	[#red]#bulle_msg p#msg_exp
	{
		font-size: 17px;
	}[/#]
}

@media screen and (max-width:640px) and (orientation: landscape) {
  body {
   -webkit-text-size-adjust: 70%;
  }
}


La police de mon p#msg_exp reste toujours à 13px. Pourquoi?! :'(
Sans page en ligne, difficile de dire ce qui cloche, tu utilises bien la meta viewport dans le head de ta page?


Tu sais tu peux recopier le code css de la média query de mon site, c'est libre. Elle gère handheld, les smart phone et les smart phone de type retina (iPhone 4(s), etc). Smiley cligne
Je ne peux pas donner le code en entier, c'est assez confidentiel (pour le boulot).
Je viens de tester quelque chose.
En ne mettant que <meta name="viewport" content="width=device-width" /> dans mon code HTML, ma page s'adapte bien sur mobiles.
Du coup, pas besoin de mettre @media etc. dans mon code CSS.
Par contre, dès que j'essaye d'en mettre (pour par exemple changer la police d'un paragraphe, ou changer un bouton), les modifications ne sont pas prises en compte sur mobiles, ça m'affiche toujours le CSS de ma page web.
Pourtant, dans mon code CSS, je mets bien @media screen and (max-width: 640px).

Si je veux par exemple modifier la taille de la police h1, je fais:

@media screen and (max-width: 640px) {
h1
{
font-size: 15px; /*De base, elle est à 13px*/
}
}

C'est bien ça, non?
En tout cas, si c'est comme ça qu'il faut faire, chez moi, ça ne marche pas...

PS: j'utilise un iPhone 3G pour tester
Le code de mon fichier css est pourtant bien documenté, voici une media query correcte :

@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
/*....*/

}


Avec ça tu es blindé pour toucher une majorité de smartphone et de gsm "normaux" avec un viel Opera Mini (handheld).

Explications : d'abord on autorise les navigateurs qui utilise le media handheld et (avec le mot clé only pour interdire IE<=8) les téléphones dont la largeur max est de 500px et les largeurs d'écrans jusqu'à 500px (si tu diminue la largeur de la fenêtre de ton navigateur de bureau, tu vois la mise en page qui change) et les smartphones avec un ratio de pixels plus élevés (iPhone 4, etc). La virgule est égale à un et entre les conditions.
Modifié par Patidou (04 May 2012 - 11:06)
Bon, j'y suis arrivée!
Mais j'ai pas du tout fait comme vous dites, parce que ça ne marchait vraiment pas (je ne sais pas pourquoi).
J'ai dû créer un autre CSS en spécifiant dans le code HTML <link href="style_mobile.css" media="screen and (max-width: 640px)" type="text/css" rel="stylesheet" />

Quand je mettais mes @media dans le même CSS (à la suite) que celui pour le web, ça ne prenait pas en compte mes modifications!
Sujet clos
Aller à