web-dev-qa-db-fra.com

Empêcher le masquage d'adresses dans les navigateurs mobiles

Je travaille actuellement sur un site Web avec une mise en page horizontale. Tous les éléments sont positionnés: absolu avec javascript. Leur taille est calculée avec window.innerHeight. Mon problème est que, même si les éléments ne dépassent pas la hauteur de la fenêtre, je peux faire défiler l'écran vers le bas (hauteur de la barre d'adresse). Ceci est agaçant de deux manières. Tout d'abord, il déclenche l'événement window-resize que je ne veux ni n'ai besoin à ce moment-là. Et Deuxièmement, cela ne fonctionne pas bien avec certaines zones de contenu dont le contenu doit pouvoir être défilé verticalement. Parfois, je peux faire défiler les cases, mais parfois toute la page est défilée en premier (comme dit précédemment: hauteur de la barre d'adresse). Existe-t-il une solution qui me permettrait d’empêcher ce mécanisme de masquage automatique de la barre d’adresses sur tous les périphériques. 

Merci d'avance!

Ce n'est pas défilable du tout: http://maxeffenberger.de/test.html

Cela peut faire défiler horizontalement (cela a du sens de voir le contenu caché) MAIS aussi verticalement jusqu'à ce que la barre d'adresse soit cachée (ça n'a aucun sens, car il n'y a pas de contenu "vertical" supplémentaire qui aurait besoin de plus d'espace: http://maxeffenberger.de /test2.html

javascriptandroidcssgoogle-chromesafari
20
Max Effenberger

Voici comment je l'ai réalisé:

            html{
                background-color: red;
                overflow: hidden;
                width:100%;
            }
            body{
                height:100%;
                position:fixed; /* prevent overscroll bounce*/
                background-color: lightgreen;
                overflow-y:scroll;
                -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */
                width:50%;                    
                margin-left:25%;
            }
20
Submachine23

La solution la plus fiable est peut-être d'utiliser l'API plein écran: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

0
Matt Gaunt

si quelqu'un a toujours ce problème avec la barre d'adresse cachée, c'est comment ça a fonctionné pour moi. 

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

J'essaie beaucoup de code similaire, mais Android Chrome était en train de me tuer. Seulement cela a fonctionné pour moi. Lorsque vous naviguez en bas de page, le problème est que cette barre de masquage automatique pose problème.

0
Gh Doo

Utilisez ce code de style sur votre page. Maintenant, votre barre d’URL chromée ne se cachera pas.Il arrêtera de défiler.

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>
0
Nitesh S Chauhan