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

Fermé
PMax-57 Messages postés 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 - Modifié par PMax-57 le 14/10/2016 à 11:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 16 oct. 2016 à 22:19
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

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 14/10/2016 à 15:09
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 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 40
15 oct. 2016 à 16:30
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
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
14 oct. 2016 à 20:42
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 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 874
14 oct. 2016 à 21:21
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 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 40
15 oct. 2016 à 16:34
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 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
15 oct. 2016 à 16:47
pas si évident, car si le 'code' n'est pas 100ù bon = erreurs = problèmes ...
pour simple preuve ...
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
16 oct. 2016 à 22:19
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