Tworzenie stron internetowych na Androida ... Szerokość dziury (bardziej prawdopodobny tekst wewnętrzny) zmienia się w pikselach na podstawie przybliżenia urządzenia.

Question

Opracowałem aplikację, która łączy się z systemem alarmowym instytucji. Jak to działa, gdy pojawia się alert, na wszystkich stronach internetowych instytucji wyświetla przewijaną ramkę zaznaczoną u góry strony, która jest umieszczana tam przez javascript przy użyciu prototypu i scriptaculous.

Wszystko to działa idealnie w przeglądarkach komputerowych (IE6-8, Chrome, Safari, Firefox, Opera). Działa również dobrze na iPhone'ach. Moim jedynym problemem jest renderowanie na Androida.

Podczas badania problemu początkowo znalazłem właściwość CSS dla urządzeń mobilnych (a mianowicie webkit) - regulację rozmiaru tekstu -webkit, która uniemożliwia urządzeniom przenośnym zmianę rozmiaru tekstu podczas powiększania i zmiany orientacji ekranu. Ustawiłem tę właściwość na "none", jak stwierdzono w wielu artykułach.

Poniżej znajduje się zrzut ekranu z emulatora Androida. Lewy zrzut ekranu pokazuje 1x powiększenie strony. Odstęp między wiadomościami jest taki, jak być powinien. Prawy zrzut ekranu pokazuje powiększoną stronę. Komunikaty pokrywają się, ponieważ rozmiar tekstu jest renderowany inaczej, a szerokość div nie jest wystarczająco szeroka, aby pomieścić tekst.

http://www.themonkeyonline.com/spacing-example.jpg

Oto kod, który umieszcza div na stronie:

var marquee = new Element('div', { 'id' : 'marquee' + marquee_counter }) 
.setStyle({ 'display' : 'block' 
    , 'WebkitTextSizeAdjust' : 'none' 
    , 'fontSize' : '12px' 
    , 'lineHeight' : '25px' 
    , 'left' : $(marquee_container).getDimensions().width + 'px' }) 
.addClassName('marquee_text') 
.update(marquee_text); 
$(marquee_container).insert(marquee); 

Czy coś mi brakuje?

Będę dalej badał problem. Dziękuję wszystkim, którzy czytają to wszystko.

---

Krótka aktualizacja ... po kolejnych testach wydaje się, że problem nie wynika z powiększenia. Wygląda na to, że problemem jest widok. Przetestowałem naprawdę długi tekst, a nawet przybliżyłem go do końca, nakładało się. Wydaje się, że element div zawierający tekst nie będzie większy niż okno.

---

Oto przykład kodu w akcji:

http://elliottr.www-dev.seminolestate.edu/alert/

Answer 1

Czy możesz umieścić link do strony demonstracyjnej, w której występuje ten problem? Próbowałem odtworzyć go w moim Milestone, ale nie mogłem.

Answer 2

Spróbuj ustawić szerokość, aby ograniczyć rozmiar div (będzie trzeba także ustawić pozycję: względna) i ustawić overflow: hidden , więc tekst nie wykracza poza rozmiar elementu div