Przeglądarka mobilna skaluje tekst zamieszczony w tabeli

0

Problem dotyczy strony html i skalowania tekstu zawartego w tabeli na przeglądarkach mobilnych (u mnie Chrome) na telefonie.
Załączam paczkę z przykładem i podglądem o co mi chodzi. Tam opisałem na zrzutach ekranu z telefonu, jaki widok chce uzyskać, a jaki mi się nie podoba. Jest to tylko niewielki fragment całej strony. Plik "główny" nazywa się 57-1125. Aby wszystko wyświetlało się poprawnie dodaję też css i folder "wypadkowe" ze zdjęciem. Chodzi o przeskalowanie tekstu w drugiej tabeli. Chcę, aby wyświetlało się wszystko tak jak na stronie na komputerze, żeby przeglądarka nie skalowała tego tekstu. Po wielu próbach zmagania się z tym wiem, że chyba wpływ na to ma długość tekstu. Jeśli jest dłuższy (więcej słów) to przeskalowanie będzie się robiło, a jeśli krótszy to będzie się wyświetlać normalnie. Tak jak pokazane jest tam na tych dwóch zrzutkach z telefonu.
Czy można coś zrobić w kodzie, aby przeglądarka tego nie skalowała, a ja nie musiałbym tak kombinować i skracać sam tekst, aby przeglądarka mobilna tego nie powiększała?

0

Dopisz sobie w sekcji meta coś w stylu:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0>

0
Freja Draco napisał(a):

Dopisz sobie w sekcji meta coś w stylu:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0>

Próbowałem już tego wcześniej, ale nie daje to pożądanego efektu. Strona wtedy otwiera się tak, jak pokazuję w załączniku i do tego w ogóle nie da się tego przesuwać, przybliżać ani oddalać. Nie widać całej treści.

0

Żeby strona się nie dała przybliżać, to musiałbyś ustawić coś w stylu:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Zadałeś pytanie, jak zrobić, żeby się nie powiększało i dostałeś odpowiedź.

Faktycznie wyświetla się to trochę połamane, ale połamany jest też kod źródłowy:

Result: 0 błędów / 12 ostrzeżenia(ń)
line 184 column 10 - Ostrzeżenie: missing <td>
line 185 column 30 - Ostrzeżenie: missing </div>
line 196 column 13 - Ostrzeżenie: missing </strong> before <center>
line 197 column 23 - Ostrzeżenie: inserting implicit <strong>
line 198 column 13 - Ostrzeżenie: discarding unexpected </strong>
line 218 column 7 - Ostrzeżenie: discarding unexpected </tbody>
line 16 column 3 - Ostrzeżenie: <style> inserting "type" attribute
line 207 column 13 - Ostrzeżenie: <img> escaping malformed URI reference
line 225 column 7 - Ostrzeżenie: <img> attribute "src" lacks value
line 229 column 3 - Ostrzeżenie: <script> inserting "type" attribute
line 196 column 13 - Ostrzeżenie: trimming empty <strong>
line 215 column 5 - Ostrzeżenie: trimming empty <thead>
Informacja: Doctype given is "-//W3C//DTD HTML 4.01 Transitional//EN"
Informacja: Document content looks like HTML 4.01 Transitional

Uzupełnienie tych urwanych tagów ma szansę pomóc. A jeśli nie, to trzeba będzie jeszcze jakoś CSS-em ogarnąć.

1
<meta name="viewport" content="width=device-width; initial-scale=1.0">
  • +dodanie @media aby nadpisać szerokość tabeli zdefiniowaną inline
0

@NewUser2k13
Dzięki, pobrałem ten poprawiony przez Ciebie plik 57-1125, ale też nie wyświetla mi się to na ekranie telefonu tak, jakbym chciał.
Efekt mam taki jak w zał nr 1 pod tym postem, można przewijać w dół, ale i tak tabela i tekst jest przeskalowany. a chciałbym uzyskać widok taki, jak w załączniku nr 2.
Wolałbym aby wyświetlało się to bez żadnego skalowania, tak jak na komputerach, np. tu:
http://statystyki-taborowe.xaa.pl/57-1172.html

1 użytkowników online, w tym zalogowanych: 0, gości: 1