[Résolu] Viewport Android et device Height

Bonjour

VERSION RAPIDE :

Sur un galaxy S2 avec navigateur android, la hauteur de ma balise html dont le height est à 100% n'est pas respectée malgré la balise meta viewport "width=device-width, initial-scale=1.0".
Ai-je une solution ?

VERSION LONGUE :

Après de multiples essais, et malgré la lecture de tous les articles relatifs à ce sujet sur ce site ainsi que sur le blog de Raphaël, je suis dans une impasse et en appelle à votre aide :

J'ai fait l'erreur de concevoir un site (en tant qu'amateur) en ne pensant au responsive que dans un second temps au lieu de penser "mobile first".

J'utilise le pluggin "backstretch" afin d'avoir une image en fond d'écran qui soit toujours homothétique.

Depuis 4 jours je code donc la partie responsive.

Mais j'ai un souci avec la taille de ma balise html.

Malgré le fait que je lui assigne une width et height à 100%, malgré le fait que j'utilise la meta :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

(j'ai essayé width=device-width seulement, ou initial-scale=1.0 seulement, et c'est pareil) :

Sur mon galaxy S2, avec le navigateur Android (en fait Dolphin, mais c'est le même), ma balise html ne prend jamais la hauteur réelle de l'écran. Le pluggin n'arrive pas non plus à calculer la bonne hauteur. Donc mon image est tronquée lorsque je scroll vers le bas.
Si je solutionnais la hauteur de la balise html, je pourrais trouver une solution de secours en squizzant backstretch, mais je n'ai aucune solution.


EDIT : Je précise que j'ai aussi ce souci sur chrome, mais pas sur Firefox et opera (pas mini).

Je vous serai gré de toute aide parce qu'à ce niveau là, je ne comprends plus grand chose.

Merci


Nouvel Edit :

Bon, j'ai trouvé une solution de contournement, qui me déplaît parce que c'est du bricolage :

Comme j'utilise le pluggin backstretch pour afficher une image de fond en homothétique, j'avais prévu une classe sur html qui lui assignait une image de fond si le javascript était désactivé.
En utilisant toujours la méta :

<meta name="viewport" content="initial-scale=1.0">

et en enlevant le height 100% sur html, mes navigateurs mobile retrouvent correctement la taille de html.
Via les media queries, aux points de rupture, j'utilise ma classe affectant une image au html au lieu du pluggin backstretch (en précisant un background-size:cover pour l'image).

Je ne passe pas pour autant le sujet en résolu, au cas où quelqu'un aurait le temps de me dire ce que ma petite coquille de cerveau n'a pas pigé dans la notion de viewport...

Modifié par Manhattan (05 Jun 2013 - 15:25)

Salut,
As-tu lu cette page avec un arrière plan extensible en css : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html ?

Oui, je suis en effet parti de là lorsque j'ai décidé de faire un arrière plan extensible.
Mais comme je voulais un site fonctionnant aussi bien sur les derniers navigateurs que les anciens, je n'ai pas choisi la solution pur CSS et me suis rabattu sur du JS.

Ensuite, le pluggin utilisé (backstretch) utilise un conteneur en fixed, et j'ai cru comprendre que ça n'était pas top sur les mobiles.

J'ai réussi hier finalement en bricolant à ce que ça passe sur les mobiles, tablettes en mettant un background-cover. Et c'est à cet instant précis que je te remercie parce qu'en re-regardant l'article de Simon, je m'aperçois que j'utilise sa solution CSS ds le cas des petits écrans mais que j'ai oublié de préfixer le cover pour tous les navigateurs. Oups.

J'ai bien compris que, dixit Raphaël, "les mobiles nous mentent". Je reste cependant certain que quelque-chose m'a échappé niveau compréhension concernant le viewport mobile. Je n'arrive pas à piger si il est possible d'une manière ou d'une autre de détecter en javascript les valeurs Hauteur, Largeur, Zoom réellement appliquées par le mobile.
Je ne capte pas non plus si avec une bonne meta viewport la balise html prendra 100% de haut et de large sur tous les navigateurs mobiles.


Modifié par Manhattan (06 Jun 2013 - 09:45)

Up

Je redemande votre aide.

J'ai soumis mon site à la critique dans la partie concernée.
http://forum.alsacreations.com/topic-18-67662-1-Amateur-Site-web-dartisan.html

Mais le contournement que j'ai effectué ne me satisfait pas car il génère des effets secondaires.

Pour rappel, j'utilise le plugin Backstretch pour afficher une image en plein écran avec redimensionnement homothétique.

Mais sur le navigateur android, la div utilisée par le plugin ne prend jamais la hauteur totale.

Lorsque j'arrive sur la page d'accueil et que je scroll vers le bas, j'obtiens ceci :



(J'affiche en premier la taille de la balise HTML, en second la taille de la div Backstretch).
Il y a un décalage en bas.

J'ai ajouté un border rouge à html, un vert à backstretch.

Par contre, cela fonctionne bien sur les autres navigateurs mobiles, et sur pc.

J'ai même essayé juste après avoir écrit les 2 valeurs que vous voyez :

$("#accueil h1").html($("html").height());
$("#accueil h2").html($("div.backstretch").height());

de faire ceci :

$("div.backstretch").css("height",$("html").height());

Mais cela ne fait rien.

Le site est visible ici :



Pour ce problème, ne pas aller à la racine du site car là se trouve la solution de contournement (une image en background cover sur html via media queries).

Si quelqu'un pouvait m'aider dans la recherche d'une solution je lui en serai gré

Edit : je précise pour ceux qui souhaiteraient éventuellement m'aider que le problème est lié à la position fixed de la div backstretch.
Modifié par Manhattan (10 Jun 2013 - 17:11)

Manhattan a écrit :
Mais sur le navigateur android, la div utilisée par le plugin ne prend jamais la hauteur totale.

Heuuu… Sur le navigateur natif android ça passe très bien, sur chrome mobile aussi d'ailleurs.

Par contre ce que tu montres c'est "Dolphin Browser". Je ne l'ai pas donc pas testé, mais bon il existe une bonne 50aine de navigateurs alternatifs qui font souvent du webkit avec de la bricole derrière. Si tu souhaites être compatible avec tous, bonne chance

a écrit :
Par contre ce que tu montres c'est "Dolphin Browser".

En fait, Dolphin standart est juste une surcouche sur android browser. Contrairement à Dolphin HD sur lequel je n'ai pas le souci.
C'est pour cela que j'ai posté un écran dolphin standart.

Mais j'ai le problème avec mon navigateur android natif (enfin "orangé") sur galaxy s2.

Visiblement, tu es sur GS3, donc pas la même version d'android browser.

a écrit :
Heuuu… Sur le navigateur natif android ça passe très bien, sur chrome mobile aussi d'ailleurs.

Mais par contre, sur chrome, j'ai bien un problème aussi. Impossible à poster :

Chrome arrive à retailler l'image en plein écran, mais lorsqu'on scroll vers le bas (page d'accueil), il fait un resize. Pas beau.

a écrit :
Si tu souhaites être compatible avec tous, bonne chance.

Non, mais au minimum, android browser, et chrome tout de même.

En tout cas, merci d'avoir pris le temps de tester
Modifié par Manhattan (27 Jun 2015 - 10:07)

Je poste mes avancées au cas où quelqu'un ait une idée :

Le décalage en bas sur certains navigateurs correspond après analyse à la barre d'adresse et varie donc en fonction du browser.

J'ai essayé pas mal de trucs mais sans réussite :

Un scroll automatique avec timer afin de laisser backstretch calculer la bonne hauteur, un passage de la div en position absolute (puisque c'était censé être le fixed qui plantait) avec repositionnement à chaque scroll, mais nada...
Modifié par Manhattan (10 Jun 2013 - 17:12)

Le plus simple serait d'utiliser au maximum background-size, et la solution de bricole au cas ou:
Un coup de Modernizr et de yepnope (par exemple):

<script>
	yepnope({
		test : Modernizr.backgroundsize,
		yep : '',
		nope : ['/path/to/your/jquery.backstretch.js', '/path/to/your/backstretch.custom.js' ]
	});
</script>

À la racinese trouve la solution de contournement que j'ai temporairement mis en place :
En dessous de 640 je desactive backstretch et affecte un background-size cover au body.
Comme backstretch ne dysfonctionne que sur certains mobiles je compte remplacer le test par la classe php-mobile-detect.
Modernizer ne m'apporterait rien donc puisque je n'utiliserais cover que sur mobile et que ts les navigateurs mobiles acceptent background-size cover ou je n'ai rien compris ??
Ensuite, c'est moins joli (sur mobile) puisque chaque page n'ayant pas la même taille l'image en background est retaillée en fonction de la page et non de l'écran. De plus je serai obligé de mettre un min-height sur le body car ma page d'accueil étant petite, une résolution d'iphone 5 par exemple fait apparaître un background répété

Je sens qu'il va falloir que je fasse des concessions graphiques vu mes choix de départ...
Modifié par Manhattan (10 Jun 2013 - 17:13)

Hello,

Sinon, tu as également ce genre de choses : http://adaptive-images.com/

Premièrement il faut que tu fixe ton image pour que le redimensionnement se fasse par rapport à la fenêtre et non à la div: background-attachment: fixed; ainsi peu importe le scroll le résultat sera le même. Et sans min-height sur le body…

a écrit :
Comme backstretch ne dysfonctionne que sur certains mobiles je compte remplacer le test par la classe php-mobile-detect.

Tu penses le problème à l'envers: Tu utilises un bricolage moche (backstretch) et souhaite le désactiver pour quelques cas ou ça marche mal.
Il faut plutôt utiliser la solution propre et moderne (background-size) et appliquer la bricole pour les vieux croulants (IE8- principalement). Ainsi tous les autres n'auront pas la charge d'un code lourd qui consomme des performances pour rien.
Pour "php-mobile-detect" je ne sais pas d'ou ça sort, mais je crains une bricole tout autant moche. Sûrement un truc à base user-agent… Pour ce genre de chose de la détection de fonctionnalités est bien plus adaptée.

@ 6l20 :

Ils utilisent screen.height dans ce module, et screen.height ne renvoit pas la bonne valeur dans les cas qui me posent problème

@kustolovic :

a écrit :
Tu penses le problème à l'envers: Tu utilises un bricolage moche (backstretch) et souhaite le désactiver pour quelques cas ou ça marche mal.
Il faut plutôt utiliser la solution propre et moderne (background-size) et appliquer la bricole pour les vieux croulants (IE8- principalement). Ainsi tous les autres n'auront pas la charge d'un code lourd qui consomme des performances pour rien.

Bon. Ca me parait logique comme réponse. J'm'y attaque.
Evidemment, comme backstretch me faisait un fade en intro, il va falloir que je travaille l'animation autrement avec background-size...

a écrit :
Premièrement il faut que tu fixe ton image pour que le redimensionnement se fasse par rapport à la fenêtre et non à la div: background-attachment: fixed;

Mais (désolé de ne pas être au niveau ) : si j'utilise background-size:cover, je n'ai pas besoin d'un background-attachment fixed en plus ???
Edit : Ok, compris, il faut en effet le fixer. Jvais y arriver...

Quant à php-mobile-detect, c'est un truc que j'ai trouvé hier : http://mobiledetect.net/ et of course c'est ptêtre pas joli
Modifié par Manhattan (10 Jun 2013 - 10:32)

Bon.
Après avoir testé background-size:cover + attachment fixed, je m'aperçois que le comportement est différent suivant les browsers mobile :


Browser android : Sans min-height sur html, la page d'accueil ne prend pas la totalité de la hauteur. Les autres pages fonctionnent.

Chrome android (4.2) : il ne comprend pas le background fixed. En cherchant, le problème est connu depuis 2010, mais pas résolu https://code.google.com/p/android/issues/detail?id=3301

Zen...
Modifié par Manhattan (10 Jun 2013 - 17:14)

Bon, je remercie les participants notamment kustolovic, et vais prochainement clôturer le sujet.

Au vu des complications / à mon niveau de prog actuel, j'ai choisi la solution moche.

J'étais partant pour le background-size cover + attachment fixed, mais ce dernier ne fonctionne pas correctement sur certains browsers mobile (nombreux posts sur le net anglophone).

J'ai donc choisi une détection de mobile (shame on me) pour utiliser jquery sur pc, et background-size cover (sans fixed) sur mobile.

J'aurais pu (et du) faire background-size cover + fixed sur pc (avec gestion particulière <ie8 ) et background-sized sans fixed sur mobile avec ma détection, mais j'ai été incapable de reproduire correctement mon opacité animée en intro du site (un animate opacity sur HTML me tronquait l'image en bas de l'écran durant l'animation puis elle apparaissait soudainement).

Merci encore pour les coups d'main, et désolé d'avoir choisi le côté obscur
Modifié par Manhattan (12 Jun 2013 - 08:45)

Bon, sujet résolu.

Position fixed ne passe pas sur au moins 3 browsers mobile que j'ai, donc j'ai choisi cette solution pas très propre mais qui marche :

- Utilisation de background-size cover + background-attachment fixed sur pc

- Détection php de mobiles pour désactiver le background-attachment fixed qui déconne sur chrome android et browser android entre autre.

Ce qui me permet de virer backstretch mais pas de me défaire d'un browser sniffing... Sniff
Modifié par Manhattan (12 Jun 2013 - 08:48)