¿Cómo puede jquery mobile ocultar la barra de direcciones del safari móvil?

¿Cómo jQuery móvil esconde la barra de direcciones del safari móvil? Creo que necesito una solución similar, pero yo no quiero usar jQuery móvil ...¿Cómo puede jquery mobile ocultar la barra de direcciones del safari móvil?

me trataron:

http://davidwalsh.name/hide-address-bar

pero que no funciona en mi caso.

Mi primer hijo del cuerpo es un div posicionado en posición absoluta con -webkit-overflow-scrolling: touch;

La propiedad -webkit-overflow-scrolling parece causar este problema, sin esa propiedad funciona bien.

Parte de este problema es que la barra de direcciones siempre permanece en primer plano, incluso si desplazo la página hacia abajo por mano. esto es causado por el posicionamiento absoluto.

Pero, sin posicionamiento absoluto, "-webkit-overflow-scrolling: touch;" no funciona ...

Después de una gran pelea con thousends de líneas de código de jQuery-móvil, que terminó con esto;)

Solución

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <!-- viewport --> 
     <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 

     <style type='text/css'> 
      body { 
       background: #E0E0E0; 
       margin: 0; 
       padding: 0; 
      } 

      .page-wrapper { 
       width: auto; 
      } 

      /* native overflow scrolling */ 
      .mobile-touch-overflow { 
       overflow: auto; 
       -webkit-overflow-scrolling: touch; 
       -moz-overflow-scrolling: touch; 
       -o-overflow-scrolling: touch; 
       -ms-overflow-scrolling: touch; 
       overflow-scrolling: touch; 
      } 
      .mobile-touch-overflow, 
      .mobile-touch-overflow * { 
       /* some level of transform keeps elements from blinking out of visibility on iOS */ 
       -webkit-transform: rotateY(0); 
      } 

      .page-header { 
       display: block; 
       background: gray; 
       border-bottom: 1px solid #CDCDCD; 
       padding: 10px;  
      } 

      .page-content { 
       padding: 10px; 
      } 

      .page-footer { 
       display: block; 
       border-top: 1px solid #CDCDCD;  
       margin-left: 10px; 
       margin-right: 10px; 
       padding: 10px; 
       padding-left: 0; 
       padding-right: 0; 
       text-align: center; 
       font-size: 12px; 
       color: #FFF; 
      } 
     </style> 

     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 

     <script type="text/javascript"> 
       /* 
       * utils 
       */ 

       var utils = { 

        supportTouchOverflow : function(){ 
         return !!utils.propExists("overflowScrolling"); 
        }, 

        supportOrientation : function(){ 
         return ("orientation" in window && "onorientationchange" in window); 
        }, 

        //simply set the active page's minimum height to screen height, depending on orientation 
        getScreenHeight : function(){ 
         var orientation  = utils.getOrientation(), 
          port   = orientation === "portrait", 
          winMin   = port ? 480 : 320, 
          screenHeight = port ? screen.availHeight : screen.availWidth, 
          winHeight  = Math.max(winMin, $(window).height()), 
          pageMin   = Math.min(screenHeight, winHeight); 

         return pageMin; 
        }, 

        // Get the current page orientation. This method is exposed publicly, should it 
        // be needed, as jQuery.event.special.orientationchange.orientation() 
        getOrientation : function() { 
         var isPortrait = true, 
          elem = document.documentElement, 
          portrait_map = { "0": true, "180": true }; 
         // prefer window orientation to the calculation based on screensize as 
         // the actual screen resize takes place before or after the orientation change event 
         // has been fired depending on implementation (eg android 2.3 is before, iphone after). 
         // More testing is required to determine if a more reliable method of determining the new screensize 
         // is possible when orientationchange is fired. (eg, use media queries + element + opacity) 
         if (utils.supportOrientation()) { 
          // if the window orientation registers as 0 or 180 degrees report 
          // portrait, otherwise landscape 
          isPortrait = portrait_map[ window.orientation ]; 
         } else { 
          isPortrait = elem && elem.clientWidth/elem.clientHeight < 1.1; 
         } 

         return isPortrait ? "portrait" : "landscape"; 
        }, 

        silentScroll : function(ypos) { 
         setTimeout(function() { 
          window.scrollTo(0, ypos); 
         }, 20);    
        }, 

        propExists : function(prop) { 
         var fakeBody = $("<body>").prependTo("html"), 
          fbCSS = fakeBody[ 0 ].style, 
          vendors = [ "Webkit", "Moz", "O" ], 
          uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1), 
          props = (prop + " " + vendors.join(uc_prop + " ") + uc_prop).split(" "); 

         for (var v in props){ 
          if (fbCSS[ props[ v ] ] !== undefined) { 
           fakeBody.remove(); 
           return true; 
          } 
         } 
        }, 

        hideAdressbar : function(){ 
         if(utils.supportTouchOverflow()){ 
          $('.mobile-touch-overflow').height(utils.getScreenHeight()); 
         } 
         utils.silentScroll(1);  
        } 

       };//utils end 

       // WINDOW LOAD 
       $(window).load(function(){ 
        utils.hideAdressbar();  
       }); 
     </script> 
    </head> 

    <body> 

     <div class="page-wrapper mobile-touch-overflow"> 
      <header class="page-header">Header</header> 
      <div class="page-content"> 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
       <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>### 
      </div> 
      <footer class="page-footer">Footer</footer>     
     </div> 

    </body> 
</html>

funciona bien, probado en Android 2.1 & iphone4 (iOS5 +)

había otro problema con este código, fijado aquí: Hide address bar in mobile Safari when scrolling (touchOverflow)

Fuente

2012-03-21 JensT

edición final, resolvió

No tiene nada que ver con -webkit-overflow-scrolling, sino más bien su height: 100%. (No sé por qué me lo perdí antes).

La única diferencia entre su archivo es los cambios de etiqueta <meta> que se detallan a continuación y que comentan height en el CSS.

Probado en iPhone 4S/iOS 5.1.

respuestas originales

Esto es lo que usamos:

window.addEventListener("load",function() { 
    setTimeout(function(){ 
     window.scrollTo(0, 1); 
    }, 0); 
});

Se trabaja cada vez.

Y sólo utilizamos addEventListener ya que los únicos teléfonos que nos interesan están basados en WebKit ...

EDITAR

Su -webkit-overflow-scrolling div no debería importar aquí. ¿Has intentado colocarlo 1 píxel abajo en la página? De todos modos, cualquier desplazamiento hacia abajo debería cubrir el píxel superior de su div completamente posicionado.

EDITAR

Así que cargan uno de sus ejemplos y esto está surgiendo en la consola de error: (esto no soluciona el problema, pero ...)

Viewport argument value "device-width;" for key "width" not recognized. Content ignored. 
/dev/1/:7Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix. 
/dev/1/:7Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.

Mirando su etiqueta <meta> veo:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Es necesario utilizar un no , un ;

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

Fuente

2012-03-21 03:20:06 tkone

he vinculado esa solución ya! y como mencioné, eso no funciona con "-webkit-overflow-scrolling: touch;" y el posicionamiento absoluto, ¿qué le parece leer primero la pregunta? – JensT

Lo leí e incluso actualicé mi respuesta. ¿Estás seguro de que lo has implementado bien? Sé que lo vincularon, pero tengo páginas móviles, en vivo, en producción, que en realidad copio y pegué ese mismo código en esta respuesta. Todas esas páginas, independientemente de las reglas de CSS que apliquemos a los elementos contenidos en ellas, ocultan la barra de direcciones con éxito. ¿Ha activado la consola del teléfono y ha buscado para ver si hay errores que impiden que su evento se active correctamente? – tkone

thx, tampoco funciona ... ¿qué pasa con la barra de direcciones siempre en primer plano? – JensT

Ésta es utiliza el código de JQM:

// Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value 
    silentScroll: function(ypos) { 
     if ($.type(ypos) !== "number") { 
      ypos = $.mobile.defaultHomeScroll; 
     } 

     // prevent scrollstart and scrollstop events 
     $.event.special.scrollstart.enabled = false; 

     setTimeout(function() { 
      window.scrollTo(0, ypos); 
      $(document).trigger("silentscroll", { x: 0, y: ypos }); 
     }, 20); 

     setTimeout(function() { 
      $.event.special.scrollstart.enabled = true; 
     }, 150); 
    }

Fuente

2012-03-21 05:00:07 codaniel

Que, con un poco de texto adicional, es el mismo código que el anterior. – tkone

thx para el fragmento, parece que tkone tiene razón, ¿por qué no funciona en mi caso? – JensT

Cualquier contenido de nuestro sitio (descargue nuestra aplicación de la tienda de aplicaciones :) :) Pero aquí hay un enlace http://www.broadcastr.com/item/matthewjohndoyle/this_is_broadcastr/mobile.html – tkone

estoy añadiendo esto porque perdí un poco de tiempo de depuración esto. La barra de desplazamiento solo se ocultará si la página es más larga que la ventana gráfica. Si su página es demasiado corta y no puede desplazarse, este código no oculta la barra de direcciones.

Esto es correcto, no hay razón para esconderse si no hay ningún contenido para dejar espacio, pero me tomó un par de minutos descubrir por qué estaba trabajando en algunas páginas y otras no.

window.addEventListener("load",function() { 
    setTimeout(function(){ 
     window.scrollTo(0, 1); 
    }, 0); 
});

Fuente

2012-10-17 16:41:19

también cuando la página se determina adecuada para el "Reader" no se ocultará de inmediato, dando al usuario tiempo para hacer clic en el botón del lector en la barra de direcciones. Tengo una página que obtiene esto y otras no, vuelve a Google para descubrir por qué ... –

<meta name="apple-mobile-web-app-capable" content="yes" />

Fuente

2013-01-11 22:39:30 Ikke

¿Cómo puede jquery mobile ocultar la barra de direcciones del safari móvil?

Respuesta

Cuestiones relacionadas