2012-07-18 15 views
5

Mam swoją stronę internetową i wygląda świetnie wszędzie, ale nie jestem profesjonalnym programistą dla Androida. Nie znam dodatkowych dziwactw, jakie mam i nie jestem pewna, o której motywie naprawdę muszę wiedzieć. Czy istnieje sposób na wyróżnienie go w komentarzach warunkowych dla IE?Naprawianie pozycjonowania absolutnego w Androidzie

Here is my website oraz baner i logo pojawiają się po lewej stronie ekranu. Mam Samsung Galaxy 3 i na tym właśnie wygląda mój baner.

enter image description here

Teraz zdaję sobie sprawę, dlaczego tak się dzieje, to dlatego, że są one zarówno pozycjonowany bezwzględnie i oczywiście margin-left czyni to zgaśnie ekran. Nie mogę tego zmienić bez zniszczenia układu wszystkich zwykłych przeglądarek komputerowych.

#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; } 

#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color: 
#fff; border: 1px solid #b4b4b4; } 



<h1 id="site-title"><span><a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home">Heavens Gate Winery</a></span></h1> 

    <div id="banner"> 
    <img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;"> 
    </div> 

Nie jestem pewien, jak powinienem pracować, aby uzyskać baner i logo do pracy z Androidem. Każda pomoc jest doceniana.

+0

Czy rozważałeś stworzenie osobnej strony mobilnej i przekierowanie kogokolwiek z przeglądarką na Androida do strony mobilnej? – psubsee2003

+0

całkiem pewnie, jeśli opakujesz zawartość w znaczniki div i zastosujesz styl 'position: relative;' do tych znaczników div spowoduje to, że twoje absolutne pozycjonowanie działa poprawnie. Nie mogę tego teraz przetestować na urządzeniu, więc nie chciałem opublikować go jako odpowiedzi. –

+0

@ psubsee2003 - Nie mam ochoty tworzyć nowej strony internetowej ani dodatkowego kodowania, aby stworzyć wersję mobilną dla jednego małego problemu z wyrównaniem. To dobra praktyka, ale nie jestem ekspertem od strony urządzeń mobilnych. – kia4567

Odpowiedz

7

Chociaż nie jest to opisywany problem, przeglądarka Android ma inny problem związany z pozycjonowaniem absolutnym; bezwzględnie umieszczone DIV znikają. Rozwiązanie Paweł Komarnicki stwierdzone jest -webkit-backface-visibility: hidden:

<div style="position: relative"> 
    <div style="position: absolute; -webkit-backface-visibility: hidden"> 
    </div> 
</div> 
+0

Ta odpowiedź powinna zostać odrzucona jako brak odpowiedzi na pytanie – msmfsd

7

Gdy trzeba pozycjonować elementy z pozycjonowaniem bezwzględnym, prawie zawsze należy to robić we względnie pozycjonowanym elemencie.

0

Mój problem jest w moim Android (Samsung), że jeżeli inne odpowiedzi, w lewo: w px daje właściwą pozycję (absolutny), ale w lewo: w% przechodzi do pozycji 0 Nawet eg na lewo: 10 pikseli; w lewo: 20%; przechodzi do pozycji 0, calc() nie działa po lewej stronie :, ale działa na szerokość w ograniczonym zakresie.

Więc myślę, że% nie działa dla lewej: w systemie Android. Pomyślałem więc, że w powyższym problemie pozostało: 50% było problemem, zastanawiam się, czy zostało rozwiązane z pozycją względną/absolutną. Zrobiłem to samo, ale bez rozwiązania! Bez względu na to, czy używamy opcji -webkit-visface-visibility!

Rozwiązanie: zamiast w lewo: 17%, użyj lewej: calc (17%) i inne stałe px po lewej: są brane, ale% nie działa !!!

Powiązane problemy