Découvrez l'interface utilisateur iPad sur votre PC

Découvrez l'interface utilisateur iPad sur votre PC
Découvrez l'interface utilisateur iPad sur votre PC

Vidéo: Découvrez l'interface utilisateur iPad sur votre PC

Vidéo: Découvrez l'interface utilisateur iPad sur votre PC
Vidéo: Texte trop petit ? Comment augmenter l'affichage de tout l'écran - YouTube 2024, Avril
Anonim

Vous voulez tester votre iPad sans vous rendre dans un Apple Store? Voici une façon de vous familiariser avec l'interface utilisateur de l'iPad directement à partir de votre navigateur!

L'iPad est le dernier gadget d'Apple à épater le monde de la technologie et les gens ont même fait la queue toute la nuit pour être l'un des premiers à en avoir un. Toutefois, grâce à une simple astuce JavaScript, vous pouvez avoir une idée de certaines de ses nouvelles fonctionnalités sans quitter votre ordinateur. Cela ne vous laissera pas tout essayer sur l'iPad, mais vous permettra de voir comment les nouvelles listes et les menus contextuels fonctionnent comme dans les nouvelles applications.

Testez l’UI de l’iPad depuis votre navigateur

Normalement, la bibliothèque de développeurs Apple iPhone en ligne ressemble à une page Web standard.

Image
Image

Mais, sur l'iPad, cela ressemble à une application native pour iPad. Avec une astuce JavaScript intéressante de boredzo.org, vous pouvez utiliser cette même interface sur votre PC. Puisque l'iPad utilise le navigateur Safari, nous avons effectué ce test dans Safari pour Windows. Si vous ne l'avez pas déjà installé, vous pouvez le télécharger à partir d'Apple (lien ci-dessous) et configuré comme d’habitude.

Maintenant, ouvrez Safari et accédez à la page des développeurs d’Apple à l’adresse:
Maintenant, ouvrez Safari et accédez à la page des développeurs d’Apple à l’adresse:

https://developer.apple.com

Entrez maintenant les informations suivantes dans la barre d’adresse et appuyez sur Entrée.
Entrez maintenant les informations suivantes dans la barre d’adresse et appuyez sur Entrée.

javascript:localStorage.setItem('debugSawtooth', 'true')

Enfin, cliquez sur ce lien pour accéder à la documentation de l'iPhone OS.
Enfin, cliquez sur ce lien pour accéder à la documentation de l'iPhone OS.

https://developer.apple.com/iphone/library/iPad/

Après un court délai, il devrait s'ouvrir en style iPad!

Le menu de gauche fonctionne comme les menus de l'iPad, avec transitions. Cela ressemble tout à fait à une application native et non à une page Web. Pour faire défiler le texte, cliquez et tirez vers le haut ou le bas de la même manière que vous le feriez sur un écran tactile.
Le menu de gauche fonctionne comme les menus de l'iPad, avec transitions. Cela ressemble tout à fait à une application native et non à une page Web. Pour faire défiler le texte, cliquez et tirez vers le haut ou le bas de la même manière que vous le feriez sur un écran tactile.

Certaines pages incluent même un menu contextuel semblable à la plupart des nouvelles applications pour iPad.

Notez que la page sera rendue à la taille de votre navigateur et si vous redimensionnez votre fenêtre, la page ne sera pas redimensionnée avec elle. Appuyez simplement sur F5 pour recharger la page. Elle sera redimensionnée en fonction de la nouvelle taille de la fenêtre. Si vous redimensionnez votre fenêtre pour qu'elle soit grande et étroite, comme pour l'iPad en mode horizontal, la page Web changera et le menu de gauche disparaîtra au lieu d'un menu déroulant, comme si vous faites pivoter l'iPad.
Notez que la page sera rendue à la taille de votre navigateur et si vous redimensionnez votre fenêtre, la page ne sera pas redimensionnée avec elle. Appuyez simplement sur F5 pour recharger la page. Elle sera redimensionnée en fonction de la nouvelle taille de la fenêtre. Si vous redimensionnez votre fenêtre pour qu'elle soit grande et étroite, comme pour l'iPad en mode horizontal, la page Web changera et le menu de gauche disparaîtra au lieu d'un menu déroulant, comme si vous faites pivoter l'iPad.
Cela fonctionne également dans Chrome car, comme Safari, est basé sur Webkit. Cependant, cela ne semblait pas fonctionner dans notre test sur Firefox ou d’autres navigateurs.
Cela fonctionne également dans Chrome car, comme Safari, est basé sur Webkit. Cependant, cela ne semblait pas fonctionner dans notre test sur Firefox ou d’autres navigateurs.
Nous avons déjà expliqué comment utiliser l’UI en ligne avec le guide de l’utilisateur pour iPhone. Jetez-y un œil si vous n’avez pas encore:
Nous avons déjà expliqué comment utiliser l’UI en ligne avec le guide de l’utilisateur pour iPhone. Jetez-y un œil si vous n’avez pas encore:

Afficher les sites Web mobiles dans Windows avec les outils de développement Safari 4

Image
Image

Conclusion

Bien que cela ne vous permette pas d’essayer vraiment l’ensemble de l’interface de l’iPad, cela vous donne au moins un aperçu de son fonctionnement. C’est passionnant de voir combien de fonctionnalités peuvent actuellement être intégrées aux applications Web. Et n'oubliez pas, How-to Geek offre un iPad à un fan au hasard! Rendez-vous sur notre page Facebook et adorez How-to Geek si vous ne l’avez pas déjà fait.

Gagnez un iPad sur la page Facebook How-To Geek

Conseillé: