Site web mobile : quand le téléphone ne veut pas de CSS !

PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous !

J'ai un petit soucis avec le resize de mes pages web sur les versions mobiles :

Mon site fait appel à une feuille style.css, dans laquelle j'ai le code suivant : 

#copyrights {
 color:#999;
 text-align:center;
 width:450px;
 line-height:15px;
 font-size:12px;
}


Ce style est repris par mon html suivant : 

<div id="copyrights">
 <a href="http://www.elodie-maleriat.fr" rel="nofollow noopener noreferrer" target="_blank">SITE CLASSIQUE</a>
 blablabla
</div>


Résulat : sur iphone le texte est très gros, alors que j'ai demandé une taille de 1px.

Par contre ! si j'insère la petite information de style directement dans le HTML, ça fonctionne... 
<div id="copyrights" style="font-size:1px;">


Quelqu'un a une idée d'où ce problème pourrait provenir ?
Merci d'avance pour vos éclaircissements !
A voir également:

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut
Dans #copyright tu as mis font-size:12px; donc ca affiche un font size de 12px
si tu mets un attribut style dans le html il devient prioritaire (quel que soit la résolution d'écran)
renseigne toi sur les règles css @media screen et donc sur le responsive design
pense aussi a vider le cache navigateur ou actualiser quand tu modifie

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   40
 
Salut !

Merci pour la réponse, mais en faite le pb vient d'ailleurs :
- lorsque ma feuille de style indique font-size 12px, et qu'il n'y a rien dans le code HTML, mon téléphone autozoome le texte et se fiche du 12px que je lui ait demandé (il affiche environ un caractère de 25px de haut)...
- en revanche, si je place le style dans la balise HTML, alors mon téléphone la reconnait et affiche bien un texte avec 12px de hauteur...
0
Réponse 2 / 3
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
lut;)
lut:)
tu as déjà une erreur rien que dans le code que tu nous mets : si l'on clique dessus l'url ne peut donc pas s'ouvrir ...

0
telliak Messages postés 3668 Date d'inscription   Statut Membre Dernière intervention   882
 
Salut,
Ce n'est pas une erreur de code, c'est le guillemet qui est pris dans l'adresse.
0
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   40
 
Salut,

Merci pour la réponse mais qu'il y ait du texte simple ou un lien, mon problème reste le même.

PS: les informations rel="nofollow noopener noreferrer" target="_blank" ont été rajoutées automatiquement par le forum CCM
0
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
pas si évident, car si le 'code' n'est pas 100ù bon = erreurs = problèmes ...
pour simple preuve ...
0
Réponse 3 / 3
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Cela peux aussi venir de la configuration de ton portable (préférence utilisateur du navigateur)
ou du cache
ce qu'il faut savoir c'est que styler une taille de texte en PX n'est pas recommandé (le web n'est pas du print)
certains devices font la conversion px --> rem pour tenir compte de la configuration utilisateur
utiliser du em ou du rem comme unité de mesure est recommandé
ensuite ne pas oublier cette ligne dans le head
<meta name="viewport" content="initial-scale=1.0"> pour les portables
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses