Cadrer l'affichage de la page web sur iphone SANS le background

Bonjour à toutes et à tous,

Tout est dans le titre : j'ai une demande catégorique et hélas pour moi, non-négociable, pour l'affichage iPhone d'un site php en cours de réalisation (qui n'existe donc que sur le disque dur d'un Mac pour le moment, sur serveur Apache, en localhost) : que l'iPhone n'affiche que la page web proprement dite, qu'il la cadre si vous voulez, comme un plan serré au cinéma, afin que le background image html derrière soit hors-écran, à bords perdus en somme. A charge ensuite au visiteur de réduire l'affichage d'un slide des doigts, pour afficher la page et l'arrière-plan avec, s'il en a envie.

Suis-je clair?

J'ai déjà réalisé des sites web en version mobile, mais je réalisais jusqu'à présent 2 versions spécifiques : une pour ordinateurs fixes, l'autre pour l'iPhone. Aussi ne me suis-je servi que du meta "viewport" et du fameux "only screen and (max-device-witdth)" pour afficher les pages en PLEINE LARGEUR. Or ce faisant, l'iPhone calcule un mixage visiblement et affiche la page des contenus + l'arrière-plan s'il existe. Ca ne m'avait jamais dérangé jusqu'à présent. Or c'est justement ce qu'on exige que j'empêche cette fois : un site unique, générique, avec une seule exception d'affichage, cadré, serré, de ses pages web seules, sans leurs backgrounds.

Je sais qu'il y a les initial-scale, les zooms de départ calculés au chargement, etc, mais je ne vois pas comment savoir quel zoom précis inscrire pour ce rognage virtuel visuel de la page sur l'écran de l'iPhone... D'autant plus que, et j'en finis là, j'ai quand même besoin qu'un tout petit bout du background, sur la droite de la page web, apparaisse, car la page blanche projette une ombre portée sur le fond gris : il faudrait donc cadrer la page avec ce léger débord... La largeur ainsi calibrée serait de 995 pixels...

Quel serait donc la bon méta viewport pour ce genre de demande s'il vous plaît? Ou bien faut-il régler cette question d'une manière différente?

De plus, il ne faut pas, évidemment, que cela vienne parasiter l'affichage standard, normal, des pages du site, sur les autres supports, ordis fixes et iPad. Dois-je rajouter dans mes pages une prévention codée supplémentaire ou non?

Tout ce à quoi j'ai pensé est le meta tag simple suivant :

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

Mais cette solution m'a paru bien trop élémentaire pour répondre à toute la problématique qui me pose question...

Voilà, vous savez tout. J'espère que j'ai fait clair, simple et pas trop long. J'ajoute que je ne suis venu ici qu'en dernier recours, n'ayant pas trouvé, nulle part, de solution avérée et pérenne à mon problème. Merci à toutes celles et tous ceux qui voudront bien m'aider.
Cordialement,
Neum
Modifié par Neum (04 Sep 2011 - 22:42)

http://www.alsacreations.com/article/lire/930-css3-media-queries.html


Modifié par jmlapam (04 Sep 2011 - 23:22)

Bonjour,

et merci du renvoi de lien : je connaissais déjà les medias-queries, mais je n'avais pas pensé à ce qui vient de me traverser l'esprit. J'aimerais donc avoir votre avis là-dessus :

=> Créer une class qui masquerait le background pour les portables et qui du coup permettrait un meta-tag "viewport" standard, associé à un link css media screen de moins de 640px.

J'imagine cette solution comme suit :

A) Dans le head des page php (comportant donc chacune son background) :

1) PLEINE LARGEUR d'affichage pour l'iphone :
<meta name="viewport" content="width=device=width" />

2) LINK REL VERS CSS UNIQUEMENT MOBILE, distinct des autres css :
<link rel="stylesheet" media="screen and (max-width: 640px)" href="mobiles.css" type="text/css" />

B) PAGE CSS EXTERNE "mobile.css" :

@media screen and (max-width: 640px) {
.hide_mobile {
display: none;
background-color: #999999;
}
}

Voilà... Dans mon calcul, j'imagine que l'affichage du background étant éliminé (l'image est dans une div d'arrière-plan, et c'est à elle que sera associée la class "hide_mobile"), la pleine largeur du contenu mesurée par l'iPhone ne tiendra compte uniquement que de la page centrée à l'écran et la cadrera donc en plan serré uniquement et elle seule. La dite page centrale comportant une ombre portée en "png transparent" sur sa droite, le nouveau fond en couleur gris pâle se verra un peu sous l'ombre et achèvera de produire visuellement l'effet qu'on exige de moi pour le site.

Qu'en pensez-vous? Cordialement,
Neum
Modifié par Neum (05 Sep 2011 - 09:58)

je vois qu'il y a eu foule pour me répondre...

Je serais aussi concis : la solution du display: none" via un CSS externe appelé par un média queries ne fonctionne pas.

J'ai changé de point de vue et tout passé en
condition PHP if else via une détection de plateforme et de navigateur en PHP également. Cette fois ça marche.

voilà.