Discussion :

[jerome69003]

Bonsoir à tous
je me permets cette petite question, car j'avoue tourner un peu en rond.
En fait, on m'a filé un site qui a été monté il y a déjà quelques années avec une taille fixe en largeur et la personne ne souhaite pas le modifier et donc surtout pas refaire le design en responsive… tant pis
Par contre, il souhaiterait que les fonts deviennent plus lisibles sur smartphone. A la rigueur, je pourrai mettre, par exemple, un

Code :

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

font-size: 120%

mais malheureusement certaines fonts méritent d'être plus agrandies que d'autres.
Du coup, je pensais mettre une balise du type

Code :

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

<meta name="viewport" content="width=640">

pour que le site soit redimensionné (réduit) automatiquement à la bonne taille sur le smartphone et après utiliser un css media query basé sur le "max-device-width" pour changer la font-size.
J'ai donc testé, et cela fonctionne sous iPhone et sous Android 4 (en tout cas par le biais de l'émulateur Eclipse) - même en ne mettant pas le viewport content - mais sous Android 2.2 (toujours par l'émulateur), le navigateur ne détecte pas la bonne résolution et je n'ai donc pas la bonne CSS appliquée.
D'après ce que j'ai pu lire et tester, pour que la bonne CSS soit appliquée sous Android 2.2, il faudrait que je mette

Code :

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

<meta name="viewport" content="width=device-width">

à la place de mon

Code :

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

<meta name="viewport" content="width=640">

mais du coup le site en question ne serait plus réduit pour s'adapter au smartphone. Je pourrai à la rigueur rajouter un

Code :

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

content="initial-scale"

mais à mon sens, ce n'est pas la bonne solution car, par la force des choses, je ne connais la résolution ou la taille du viewport du smartphone sur lequel le site va être consulté.

Alors, est-ce que selon vous, je fais une erreur quelque part ou il y a t-il un moyen de contourner tout cela ?

D'avance merci
et bonne soirée à tous !
Jérôme

[Muchos]

surtout pas refaire le design en responsive […] je ne connais la résolution ou la taille du viewport du smartphone sur lequel le site va être consulté.

D'où l'intérêt du responsive design !

Néanmoins, vous pouvez définir vos medias queries dans la css, et écrire simplement la meta comme ceci :

Code html :

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

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

[jerome69003]

Merci Muchos pour la réponse…
néanmoins si je mets le code que tu m'as donné, sauf erreur de ma part, mais ce n'est pas le site entier qui va être affiché - certes en réduction - sur le smartphone mais qu'une partie basé sur la taille du viewport. En l'occurrence, vu que le site fait 950px de large, je n'aurai que grosso-modo 1/3 d'affiché
Je crois que, tant pis, je vais laisser avec uniquement le code suivant

Code :

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

<meta name="viewport" content="width=950">

cela fonctionne comme je le veux sous Android 4 et iPhone (mais pas sous Android 2.2 ni 2.3).

Merci
@+