logo elektroda
logo elektroda
X
logo elektroda
REKLAMA
REKLAMA
Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

HTML - Inna wielkość czcionki na stronie w telefonie niż na komputerze

sebalorek 28 Lip 2019 14:17 1320 10
REKLAMA
  • #1 18084759
    sebalorek
    Poziom 8  
    Posty: 97
    Ocena: 38
    Czy jest jakaś możliwość, aby czcionka wyświetlała się w telefonie w takiej samej wielkości (skali) jak na komputerze? Szczegóły na zdjęciach (wersja z komputera i wersja z telefonu). Dodam, że te przeskalowanie występuje tylko w niektórych przypadkach. Nie dzieje się tak natomiast m.in. w przypadku, jeśli tekst tej największej czcionki z czerwonego pola jest krótszy (chodzi o napis "EN57AL-2115 / ex. EN57-1421)" to na telefonie to przeskalowanie nie występuje (patrz załącznik pt. poprawny widok na telefonie). Podaję też kod źródłowy jak to wygląda:

    	<div class='container'>
    		<div class='inner'>
    			<span class='text'>Przewozy Regionalne<br>Oddział Dolnośląski z siedzibą we Wrocławiu</span>
    			<table class='center border' width="485" rules="all">
    				<thead>
    					<tr bgcolor="#FAEDED">
    						<td colspan="3" rowspan="2" align="center">
    							<div class="redkw">
    								<span style="font-size:21px;"><strong>EN57AL-2115 / ex. EN57-1421<br></strong></span>
    						   <small>94 51 2 122 205-9    <u>PL</u>-PREG</strong></small><br>
    						   <small>94 51 2 122 206-7    <u>PL</u>-PREG</strong></small><br>
    						   <small>94 51 2 122 207-5    <u>PL</u>-PREG</strong></small><br><br>
    								5Bk 6Bk 5Bk - 955/299 / 1981<br>PAFAWAG Wrocław
    							</div>
    						</td>
    					</tr>
    				</thead>
    			</table>
          <table class='center' width="485" style="height: 25px" border="1" rules="all">
            <thead class='table-title'>
              <tr>
                <td align="center" style="width: 495px"><strong>Rodzaj naprawy</strong></td>
                <td align="center" style="width: 295px"><strong>Data naprawy</strong></td>
                <td align="center" style="width: 585px"><strong>Wykonawca naprawy</strong></td>
    					</tr>
    				</thead>
    				<tr>
    					<td align="center">Fabr.</td>
    					<td align="center">18.03.1981</td>
    					<td align="center">PFW Wrocław</td>
    				</tr>
    				<tr>
    					<td align="center">R6</td>
    					<td align="center">31.10.2000</td>
    					<td align="center">ZNTK Mińsk Maz.</td>
    				</tr>
    				<tr>
    					<td align="center">R7</td>
    					<td align="center">16.01.2006</td>
    					<td align="center">ZNTK Mińsk Maz.</td>
    				</tr>
    				<tr>
    					<td align="center">P5/1+M</td>
    					<td align="center">30.11.2015</td>
    					<td align="center">ZNTK Mińsk Maz.</td>
    				</tr>
    				<tr>
    					<td align="center">1P4/1</td>
    					<td align="center">27.06.2019</td>
    					<td align="center">ZNT Kruszewiec</td>
    				</tr>
    			</table>
    		</div>
    		<!-- END OF INNER -->
    	</div>
    	<!-- END OF CONTAINER -->


    Czy da się coś z tym zrobić? Próbowałem dodawać:
    <meta name=viewport content="width=device-width, initial-scale=1">
    W telefonie na czcionkę pomagało, ale powodowało to, że ta podstrona otwierała się z boku na białym polu a nie centralnie na tabelkę (która jest jakby nie było wycentrowana), awolałbym, aby to się otwierało wycentrowane na tabelkę. Są inne sposoby na to?
    Załączniki:
    • HTML - Inna wielkość czcionki na stronie w telefonie niż na komputerze widok na telefonie.png (125.44 KB) Musisz być zalogowany, aby pobrać ten załącznik.
    • HTML - Inna wielkość czcionki na stronie w telefonie niż na komputerze widok na komputerze (Chrome).jpg (79.31 KB) Musisz być zalogowany, aby pobrać ten załącznik.
    • HTML - Inna wielkość czcionki na stronie w telefonie niż na komputerze poprawny widok na telefonie.png (74.08 KB) Musisz być zalogowany, aby pobrać ten załącznik.
  • REKLAMA
  • #3 18085460
    sebalorek
    Poziom 8  
    Posty: 97
    Ocena: 38
    Jak daję font-size:16px to i tak na telefonie mam to przeskalowane. Może podam link do konkretnej podstrony i sprawdźcie jak macie możliwość wygląd tego na komputerze i na telefonie. Tak jak pisałem czcionka w dolnej części czerwonego pola powinna być tej samej wielkości co w tabelce czarna.

    Przykład gdzie jest różnica między komputerem a telefonem:
    http://statystyki-taborowe.xaa.pl/57-2115.html

    Przykład gdzie w telefonie wyświetla się poprawnie tak jak na komputerze:
    http://statystyki-taborowe.xaa.pl/57-206.html

    Kody są te same w obu przypadkach.
  • REKLAMA
  • #4 18085700
    LED5W
    Poziom 34  
    Posty: 2302
    Pomógł: 264
    Ocena: 162
    Musisz tak napisać stronę, aby przeglądarka nie musiała jej skalować.
    Sugeruję usunąć przestarzałe atrybuty i przejść na HTML 5. Usunąć ustawienia szerokości tabel i .container. Dodać
    Kod: HTML, XML
    Zaloguj się, aby zobaczyć kod

    Dane są w bazie czy w plikach HTML?
  • REKLAMA
  • #5 18085934
    sebalorek
    Poziom 8  
    Posty: 97
    Ocena: 38
    Tak jak pisałem wyżej, dodawałem:
    <meta name=viewport content="width=device-width, initial-scale=1">

    Co prawda wówczas to przeskalowanie nie występowało, ale nie podobało mi się, że ta podstrona w telefonie nie otwierała się centralnie na tabelkę (wyśrodkowaną) tylko w górnym lewym rogu na białym polu. Trzeba było przesunąć się w prawo. Także tak źle i tak niedobrze w mojej ocenie.

    Ja mam stronę w plikach HTML, jest to około 4 tys. elementów.
  • REKLAMA
  • #6 18085959
    hindoos
    Poziom 37  
    Posty: 3797
    Pomógł: 295
    Ocena: 677
    sebalorek napisał:
    Ja mam stronę w plikach HTML, jest to około 4 tys. elementów.

    Może czas przenieść to do bazy?
  • #7 18085964
    sebalorek
    Poziom 8  
    Posty: 97
    Ocena: 38
    Ale czy to by pomogło z tym wyświetlaniem tej czcionki? Bo jeśli nie ma to znaczenia to chyba wolałbym nie robić nic, a samego wyglądu też nie chce zmieniać.
  • #8 18085979
    hindoos
    Poziom 37  
    Posty: 3797
    Pomógł: 295
    Ocena: 677
    Wtedy zmienisz w tylko jednym miejscu, a nie w 4 tys. plików. Ale wracając do tematu
    sebalorek napisał:

    Przykład gdzie jest różnica między komputerem a telefonem:
    http://statystyki-taborowe.xaa.pl/57-2115.html

    Przykład gdzie w telefonie wyświetla się poprawnie tak jak na komputerze:
    http://statystyki-taborowe.xaa.pl/57-206.html


    Masz różny markup, górna strona - znacznik span z zadeklarowanym stylem, dolna strona - znacznik small
  • #9 18086204
    sebalorek
    Poziom 8  
    Posty: 97
    Ocena: 38
    Teraz zauważyłem, że w pierwszym poście podałem zły kod, oryginalnie to jest ze znacznikami <small></small> i w środku jeszcze 3x spacje (&nbsp;) tak jak w powyższych linkach można podejrzeć w kodzie źródłowym też.
    W każdym razie czy jest <small> czy font-size zbliżona do tej wielkości i tak nie działa to poprawnie. To nie ma wpływu na to.
  • #10 18086853
    nareus
    Poziom 1  
    Posty: 1
    Możesz spróbować użyć css media i zeskalować czcionkę względem szerokości ekranu. Ważne jest aby pomiędzy tagami head użyć właśnie tego tagu <meta name=viewport content="width=device-width, initial-scale=1">, w przeciwnym wypadku kod nie zadziała.
    wskazówka: w css jeśli nie masz nigdzie podlinkowanego arkusza stylów wpisz to miedzy <style>kod</style>
    np.
    @media all and (max-width:576px){
    body{
    font-size: 30px;
    }
    }

    Wyjaśnienie: Jeśli szerokość okna jest mniejsza niż 576px to ustaw czcionkę na 30px
  • #11 18087485
    LED5W
    Poziom 34  
    Posty: 2302
    Pomógł: 264
    Ocena: 162
    sebalorek napisał:
    Tak jak pisałem wyżej, dodawałem:
    <meta name=viewport content="width=device-width, initial-scale=1">

    Co prawda wówczas to przeskalowanie nie występowało, ale nie podobało mi się, że ta podstrona w telefonie nie otwierała się centralnie na tabelkę (wyśrodkowaną) tylko w górnym lewym rogu na białym polu. Trzeba było przesunąć się w prawo. Także tak źle i tak niedobrze w mojej ocenie.
    Musisz zrobić wszystko co napisałem. Wtedy będzie działać na każdej przeglądarce.

    sebalorek napisał:
    Ja mam stronę w plikach HTML, jest to około 4 tys. elementów.
    Czyli masz do wyboru albo przenieść dane do bazy i zrobić szablon, albo edytować wszystkie pliki i w razie konieczności zmian będzie powtórka...

Podsumowanie tematu

LABEL_AI_GENERATED
Użytkownik pyta o możliwość wyświetlania czcionki na telefonie w tej samej wielkości co na komputerze. Zauważa, że przeskalowanie występuje tylko w niektórych przypadkach, a podaje przykłady stron, gdzie różnice są widoczne. Odpowiedzi sugerują, aby dostosować kod HTML, usunąć przestarzałe atrybuty, przejść na HTML5 oraz dodać tag meta viewport. Użytkownik zauważa, że dodanie tagu viewport nie rozwiązało problemu, ponieważ strona nie otwierała się centralnie. Proponowane są także zmiany w CSS, takie jak użycie mediów do skalowania czcionki w zależności od szerokości ekranu. Wskazówki obejmują przeniesienie danych do bazy, co ułatwi zarządzanie kodem.
Podsumowanie AI na podstawie dyskusji. Może zawierać błędy.
REKLAMA