Tester affichage retina

[Goliath]

Hello,
je dois tester l’affichage de certaines pages web concernant les media queries et la propriété min-device-pixel-ratio et ceci sur des écrans retina, sauf que je n’ai pas d’écran retina sous la main… j’ai voulu passer par le service Browserstack, mais le support m’a répondu en m’écrivant qu’ils n’ont pas encore intégré cette fonctionnalité.
Vous connaissez une solution pour faire des tests (service en ligne, plugin pour navigateurs, utilitaires…), je dois inspectionner les propriétés des éléments de la page.

Merci.

 

[westindies972]

Salut

Il existe un moyen simple sur mac de tester la propriété min-device-pixel-ratio si tu n'a pas de mac retina sous la main : utiliser le simulateur iOS fourni avec Xcode en sélectionnant un ipad retina comme matériel.
Tu verra tout de suite si tes images apparaissent pixelisées et si tes propriétés css spécifiques sont prises en compte.

Bon courage

 

[Goliath]

Salut et merci pour l'intérêt,
j'ai essayé avec le simulateur d'Opera et j'arrive plus ou moins à vérifier l'affichage même si cela n'est pas très confortable à manipuler, par contre je dois arriver à sélectionner les éléments sur la page pour contrôler les propriétés css spécifiques de mes éléments (à la façon de Firebug) et ceci pour différents type d'écrans, le simulateur d'Opera ne le permet pas, est-ce que celui d'iOS fourni avec Xcode le permet?

 

[westindies972]

Tu peux utiliser l'inspecteur web de Safari. Lorsque tu visualises ton site dans l'iPad simulator, tu ouvres Safari (celui de ton ordinateur), tu vas dans le menu Développement / iPad Simulator et tu choisi l'application à inspecter.

Tu vas te retrouver ensuite avec l'inspecteur web de safari dans une fenêtre volante que tu pourras mettre à côté du simulateur et inspecter les éléments comme si c'était la fenêtre de ton navigateur (visualisation des styles, console javascript...)

Bon courage

 

[Goliath]

…
… je tiens à préciser que c’est la première fois que j’utilise ce genre d’application (je ne suis pas développeur) et avant de me lancer dans les entrailles d’Xcode, je voudrais savoir si cela va me permettre de simuler aussi les autres tailles d’écran retina d’Apple, par exemple un iMac (2560 x 1440) ou un PowerBook (2880 x 1800), dans ta réponse tu parles d’iOS…
Dans Opera Mobile Emulator il est possible de rentrer ses propres résolutions d'écran, est-il possible de le faire aussi dans Xcode?
Merci.

 

[Goliath]

….bon j’ai continué mes recherches sur le web pour essayer de trouver un outil qui puisse simuler les différentes résolutions d’écrans en mode retina et ceci à partir d’un navigateur, et bien franchement ce n’est pas donné, on fait toujours référence à des émulateurs pour iOS et quasi rien pour les écrans retina de bureau (iMac, MacBook Pro, …)
Je suis tombé sur un développeur qui propose ce script d’émulation pour navigateur, cependant je cale ici aussi:

• Où se trouve dans Chrome cette nouvelle section écran qui permet de simuler le changement du pixel ratio? Je n’ai rien trouvé.
• Il est possible d’utiliser le script du développeur comme bookmarklet en ajoutant le préfixe javascript: avant son code, j’ai essayé et cela n’a rien donné.
  Est-ce qu’il y a une astuce pour convertir un fichier JavaScript en bookmarklet?

Merci de votre aide.

Edit ok, pour le pixel-ratio dans Chrome j'ai trouvé

 

[Goliath]

… et avec les liens des scripts au fond de page que donne le blog de Raphaël Goetter la tâche sera nettement moins compliquée