2010-12-07 2 views
5

Je publie un livre gratuit en ligne au format HTML5 et j'ai dit que ce serait génial si je pouvais l'optimiser pour l'iPad même si je n'en ai pas.Comment forcer iPad Safari à ne pas réduire ma page Web en mode portrait?

J'ai donc commencé à travailler sur le design et cette idée était dans ma tête tout le temps. J'ai fait le design juste pour s'adapter à l'écran de l'iPad en mode portrait, puis j'ai essayé de le tester et j'ai découvert que Safari réduisait tout le site pour adapter les pages à son écran qui me dégoûtait Ne faites pas trop de recherche) et Apple ne me laissera pas avoir un émulateur d'iPad parce que je n'ai pas de Mac !!

Quoi qu'il en soit ... est-il possible de forcer Safari à ignorer ce comportement et laisser mes lecteurs profiter de mon échelle 1: 1? quelque chose comme une requête de médias CSS ou un peu de javascript?

http://mmahgoub.com/thebook/foreword.html

Merci

Répondre

17

Essayez d'ajouter

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> 

dans votre tête.

+1

Cela aura (parfois malheureux) effet secondaire de causer iPhones être incapable de zoomer le contenu plus afin de le lire. – LocalPCGuy

+0

Fonctionne très bien pour les cartes en plein écran! – CrazyTim

+0

Si le zoom est désactivé, ce n'est pas un effet secondaire. '" user-scalable = no "' empêche cela. Si vous souhaitez que le zoom reste intact, omettez simplement cette partie. –

-1

Voici un simulateur d'iPad en ligne que vous pouvez utiliser. Ce n'est pas Xcode, mais c'est utile quand même.

http://ipadpeek.com/

+5

Ce "site web simulateur iPad" n'est rien de plus qu'un iFrame avec un skin, il ne fait pas de CSS spécifique et rend les rendus complètement différents. Juste pour que vous le sachiez, cela pourrait bien fonctionner là-dessus, mais complètement différent sur l'iPad lui-même. – Matthijn

Questions connexes