Luka powyżej ustalonego nagłówka w przeglądarce Androida 4+

Jakieś pomysły dotyczące usuwania luki (na ekranie) pojawiającej się podczas przewijania? Nagłówek ma ustaloną pozycję, a przerwa pojawia się tylko w Androd (testowane na systemie Android 4.0.4).Luka powyżej ustalonego nagłówka w przeglądarce Androida 4+

Gap

część kodu odpowiedzialna za nagłówku:

HTML:

<div data-role="page" id="settings"> 
    <div class="holo-action-bar"> 
     <h1><span>Settings</span></h1> 
    </div> 
    <div class="content content-inner"></div> 
</div>

CSS:

.holo-action-bar { 
    background-color: #333; 
    color: #fff; 
    display: block; 
    position: fixed; 
    top: 0; right: 0; left: 0; 
    width: 100%; 
    z-index: 1000; 
}

Ponadto można zobaczyć przykład w jquery mobile docs

UPDATE:

Problem nie występuje na iOS (testowane na iOS 5+)

Źródło

2013-02-01 jarekpelczynski

post jakiś kod nie mamy żadnych szans, aby dowiedzieć się, co zrobiłeś, aby wyglądał jak to zrobić .. kod www.jsfiddle.net –

@SimonPertersen dodany – jarekpelczynski

Ale usuwać swoje data-position = "fixed"

zrób klasę

<div id="header"><h1>Fixed header!</h1></div>

css:

#header{ 
position:fixed; 
top:0; 
}

EDIT *

Próbowałeś sprawdzić margines na swojej wewnętrznej obiektu? jeśli jego tag ap lub H1 lub tak mają standardowy margines

gdybym sprawdzić link dałeś btw i dont like jquery telefonu bo to daje więcej problemów niż to pomaga tbh .. ale tak czy owak wydaje się, że mają granica na 1px czy masz link do swojej strony?

Źródło

2013-02-01 11:35:34

I don” t używaj jQuery Mobile (zgadzam się z twoim zdaniem o jQM). Chciałem pokazać na przykładzie, że ten sam problem również istnieje. – jarekpelczynski

co najmniej do góry: -1px; jako hack, jeśli nie wysyłasz kodu, nie mogę go debugować, więc jeśli zrobisz jsfiddle, z chęcią rozwiążę go dla ciebie: –

top: -1px; również pozostawia lukę na mojej komórce. Nawet u góry: -10 pikseli; – ino

miałem ten sam problem i rozwiązać go przypadkowo, gdy dodałem ten wiersz w moim activity.java:

mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

i android:hardwareAccelerated="true" w manifeście pod tagiem <application>. Spowoduje to wyłączenie renderera oprogramowania na rzecz sprzętu i działa na moim urządzeniu 4.0.1.

Jeśli używasz webview z ustalonym nagłówka i stopki, można również chcieć dodać następujące też tak migający animacja na nagłówku/stopce znika:

mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Źródło

2013-04-29 00:08:53 ino

Mam luka 1px powyżej poprawiony nagłówek w konsoli Android 4 podczas korzystania z Intel App Framework 2 z Cordova 3.0.0. Przy docelowej wersji Androida ustawionej na 4.3.

Problem polegał na tym, że ustawiłem docelową wersję Androida na 2.3.3 w poprzednich projektach.

Na koniec stwierdziłem, że po ustawieniu HardwareAccelerated = "false" (w dwóch miejscach) w AndroidManifest.xml, odstęp 1 px zniknął.

Źródło

2013-10-22 07:29:05 ausiuming

znalazłem rozwiązanie:

jest to problemem CSS na PhoneGap.

body { 
    << height : 100%; don't use it >> 
    width: 100%; 
    margin:0; 
    padding:0; 
    top: -1px; 
}

HardwareAccelaration: true

Źródło

2014-03-17 05:49:39 user3408707

Luka powyżej ustalonego nagłówka w przeglądarce Androida 4+

Odpowiedz

Powiązane problemy