Site mobile & viewport

Bonjour,

Je dois intégrer un site avec une version mobile , j'ai obtenu deux psd pour cela, un avec 1200 px de large, l autre 380

j'ai rajouté la balise suivante pour le viewport :

a écrit :

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

et un css spécial mobile

a écrit :

<style type="text/css">
@import url(assets/css/reset.css) screen;
@import url(assets/css/styles.css) screen;
@import url(assets/css/mobile.css) screen and (max-width: 480px);
</style>

le css mobile est correctement chargé sur mobile (mais pas si je retire la balise de viewport ) par contre en testant sur un iphone 4, le site dépasse la largeur du viewport , après quelque test on dirait qu'il est calibré sur du 320, soit la largeur de l ecran de l iphone detecté par javascript.

de plus , après une rotation d'ecran , j'arrive en mode paysage, et la le site ne fait plus que 2/3 de l écran .... c' est moche.


j'ai du mal m'y prendre, mais je ne vois pas trop comment faire maintenant.. une idée?

oops je viens de voir qu'il y avait un forum responsive, si un admin peut déplacer le message..désolé


après pas mal de lecture, j'arrive pas à corriger mon soucis. par contre, si je mets un coup de doigts pour dézommer sur l iphone, le viewport s adapte parfaitement à la taille du site mobile (380px) et après c est nickel, je ne comprends pas, tout est mis dans des conteneurs à 380px...

Bonjour,

Est-ce que cet article de Raphael : Comprendre le Viewport dans le Web mobile t'aiderait ?
Après il y a le fort bel article de Stéphanie : Responsive Webdesign – présent et futur de l’adaptation mobile.

J'ai quelques doutes sur la pertinence d'un PSD de 380px de large et pas 320 par contre (en t'ayant demandé un affichage correct en 320px, pas en 480 mini)... À moins que l'adaptation 380-320 soit évidente et qu'on ait pas besoin des 480px de large. J'ai lu plus d'une fois " faut pas choisir comme point de rupture des valeurs fixes, faut prendre celles imposées par le contenu" m'enfin 320 et 480 c'est quand même très très courant... Après sur 640 et/ou 768 et/ou 800 et/ou 840 là OK ça dépend du contenu, entre autres

Bonjour,

Merci pour les liens, mais à vrai dire j'ai déja lu tout ceci mais je ne comprends pas toujours pas pourquoi ca bloque sur ce site précisement.

Effectivement le mieux en responsive, c est travailler sur quelque chose qui s'adapte quelque soit la taille, image et div en % etc.. j'ai deja fait des sites comme cela et c est vrai que c est le top.

seulement la , on m'a pas demandé, j'ai reçu la charte et je dois me débrouiller avec ceci.

ce que je comprends pas, c est que si je retire le css mobile ainsi que le meta viewport

la le site s'affiche parfaitement bien sur l iPhone en mode portrait. le viewport est impeccable, pile poile sur mon contenu à 1200px (version desktop) ...

l iPhone sait afficher correctement un site de 1200px de large, mais pas un de 380px.. plutôt étrange non?

Je précise que le site passe la validation w3c et ne contient pas d'erreurs type div non fermé ou autre qui pourrait expliquer que le viewport fonctionne mal.
Modifié par nr34 (10 Mar 2014 - 10:32)

J'ai résolu mon soucis en faisant un hack JS bien dégeulasse

$(window).bind('orientationchange', function(e) {

 if (screen.width == 320)
                {
                    $('body').css('zoom',"84.21%")
                }


// etc ajout aussi de ce doc dans le $(document).ready ///


});

C est moche mais au moins maintenant le site s' affichage parfaitement bien sur iphone.

A date personne n'a pu n'expliquer pourquoi j'avais ce soucis alors que j'utilise ce qui est recommandé sur tous les sites.
Soit mon html, pourtant simple et clean, a une particularité, soit les interprétations des browser sur le meta viewport sont plus qu'étrange

Salut,

nr34 a écrit :
Effectivement le mieux en responsive, c est travailler sur quelque chose qui s'adapte quelque soit la taille, image et div en % etc.. j'ai deja fait des sites comme cela et c est vrai que c est le top.

seulement la , on m'a pas demandé, j'ai reçu la charte et je dois me débrouiller avec ceci.

Qu'est-ce qui t'empêche, franchement, de faire de l'intégration fluide, voire élastique ?

Soit dit en passant, tu peux très bien regrouper tes trois feuilles de styles en une seule et utiliser la règle @media pour les media queries. En outre, pour appeler les feuilles de styles, préfère l'élément link à la règle @import si tu te soucies des performances Web.