W jaki sposób jquery mobile ukrywa pasek adresu mobilnego safari?

W jaki sposób jQuery mobile ukrywa pasek adresu mobilnego safari? Chyba muszę podobne rozwiązanie, ale nie chcę użyć jQuery mobile ...W jaki sposób jquery mobile ukrywa pasek adresu mobilnego safari?

Próbowałem:

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

ale to nie działa w moim przypadku.

Moje pierwsze dziecko z ciała jest pozycjonowanym div absolutnie z -webkit-overflow-scrolling: touch;

Właściwość -webkit-overflow-scrolling wydaje się powodować ten problem, bez tej właściwości działa poprawnie.

Częścią tego problemu jest to, że pasek adresu zawsze pozostaje na pierwszym planie, nawet jeśli przewijam stronę na jedno rozdanie. jest to spowodowane bezwzględnym pozycjonowaniem.

Ale bez pozycjonowania bezwzględnego "-webkit-overflow-scrolling: touch;" nie działa ...

Po wielkiej walce ze tysiace linii kodu jquery-mobile, skończyło się z tego;)

Rozwiązanie

<!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>

działa poprawnie, testowane Android 2.1 & iphone4 (iOS5 +)

był tam inny problem z tym kodem, stała tu: Hide address bar in mobile Safari when scrolling (touchOverflow)

Źródło

2012-03-21 JensT

EDIT FINAL rozwiązał

To nie ma nic wspólnego z -webkit-overflow-scrolling, ale raczej swoją height: 100%. (Nie wiem, dlaczego przedtem tęskniłem).

Jedyna różnica między plikiem to zmiana tagu <meta> opisana poniżej i wykreślenie height w CSS.

Testowany na iPhone 4S/iOS 5.1.

ORYGINALNE ODPOWIEDZI

To właśnie zastosowanie:

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

To działa za każdym razem.

I używamy tylko addEventListener ponieważ niewielu telefonów Dbamy o opierają WebKit ...

EDIT

Twój -webkit-overflow-scrolling div nie powinno sprawa tutaj. Czy próbowałeś umieścić 1 piksel na stronie? Niezależnie od tego, jakikolwiek zwój powinien pokrywać górny piksel twojego bezwzględnie umieszczonego elementu div.

EDIT

Więc załadowałem jeden z przykładów i to pojawiały się w konsoli błędów: (to nie rozwiąże problemu, ale ...)

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.

Patrząc na tag <meta> widzę:

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

trzeba użyć nie ,;

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

Źródło

2012-03-21 03:20:06 tkone

i związane, że rozwiązanie już! i jak już wspomniałem, nie działa z "-webkit-overflow-scrolling: touch;" i absolutne pozycjonowanie, co powiesz najpierw na przeczytanie pytania ... – JensT

Przeczytałem to, a nawet zaktualizowałem swoją odpowiedź. Czy jesteś pewien, że dobrze to zaimplementowałeś? Wiem, że jesteś z nim powiązany, ale mam strony mobilne, na żywo, w produkcji, że faktycznie skopiowałem i wkleiłem ten kod z tej odpowiedzi. Wszystkie te strony, bez względu na to, jakie reguły CSS stosujemy do elementów w nich zawartych, skutecznie ukrywają pasek adresu. Czy włączyłeś konsolę w telefonie i sprawdziłeś, czy występują błędy uniemożliwiające prawidłowe wystrzelenie wydarzenia? – tkone

thx, również nie działa ... a co z paskiem adresu znajdującym się zawsze na pierwszym planie? – JensT

To JQM kod wykorzystuje:

// 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); 
    }

Źródło

2012-03-21 05:00:07 codaniel

Który, z niektórymi dodanymi schematami, jest taki sam jak powyżej. – tkone

thx dla snippet, wydaje się, że tkone ma rację, więc dlaczego nie działa w moim przypadku? – JensT

Wszelkie treści z naszej strony (pobierz naszą aplikację ze sklepu z aplikacjami! :)) Ale tutaj jest link http://www.broadcastr.com/item/matthewjohndoyle/this_is_broadcastr/mobile.html – tkone

Dodaję bo to zmarnowany trochę czasu debugowania to. Pasek przewijania zostanie ukryty tylko wtedy, gdy strona jest dłuższa niż obszar wyświetlania. Jeśli twoja strona jest zbyt krótka i nie można jej przewinąć, ten kod nie ukryje paska adresu.

To prawda, nie ma powodu, aby ukrywać, jeśli nie ma żadnych treści, aby zrobić miejsce, ale zajęło mi kilka minut, aby dowiedzieć się, dlaczego działa na niektórych stronach, a nie innych.

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

Źródło

2012-10-17 16:41:19

również wtedy, gdy określona strona jest odpowiednia dla "Czytnika", nie ukryje się od razu, dając użytkownikowi czas na kliknięcie przycisku czytnika na pasku adresu. Mam jedną stronę, która dostaje to, a inni nie, z powrotem do Google, aby dowiedzieć się, dlaczego ... –

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

Źródło

2013-01-11 22:39:30 Ikke

W jaki sposób jquery mobile ukrywa pasek adresu mobilnego safari?

Odpowiedz

Powiązane problemy