Witam.
Tworzę one page na WordPress i napotkałem pewiem problem.
Mimo że bawię się już od dłuższego czasu z php, html i css to dopiero teraz postanowiłem stworzyć szablon który będzie ładnie wyglądał WSZĘDZIE. Dosłownie wszędzie.
Na ekranach laptopów, dużych monitorach PCtów, telefonach, tabletach czy nawet na ogromnych telewizorach.
Mój szablon wygląda już dobrze na komputerach (laptopach, PC) jednak mam problem z telefonami.
Nie mogę znaleźć pożądnego emulatora urządzeń mobilnych. Wbudowany emulator w GoogleChrome oszukuje. Pokazuje jedno a w telefonie o identycznej rodzielczości wyświetla się co innego.
Ustawienie w css marginesów, paddingów, szerokości i wysokości w procentach jest oczywiste. Jednak jak ogarnąć czcionki?
Mój największy problem w tej chwili to skalowanie czcionki.
Zastanawiałem się jak do tego podejść. Myślę, że najłatwiejszym sposobem będzie skalowanie czcionki względem elementu, w którym umieszczony jest tekst - Np. element ten ma w danej chwili 600px szerokości a skrypt przypisuje dla niego font-size np. 5% szerokości elementu czyli 30px.
W JS dopiero raczkuję, dlatego tutaj piszę.
Czy ktoś spotkał się z jakimś skryptem który to umożliwia?
Pełna wersja: [porada] Design Responsywny
saucelabs.com
browserstack.com
browserstack.com
Dzięki trueblue 
Rozwiązałem to w bardzo prosty sposób:
Dla <body> ustawiłem id="scale" i przechowuję ją w zmiennej el
x to wewnętrzna szerokość okna przeglądarki
y to połowa szerokości
na koniec przypisałem zmienną y do stylu <body>
Przy oknie o szerokości 1900px otrzymuję w body font-size: 950%;
Następnie w każdym kolejnym elemencie zawartym w <body> font-size ustawiam jako %.
Skrypt zadziała przy przeskalowaniu okna i przeładowaniu strony.
Do celu jakiego potrzebuję to wystarczy.
Zostawiam dla potomnych
Rozwiązałem to w bardzo prosty sposób:
Kod
<script type="text/javascript">
el = document.getElementById("scale");
x = window.innerWidth || document.documentElement.clientWidth;
y = x/2;
el.style.fontSize = y + "%";
</script>
el = document.getElementById("scale");
x = window.innerWidth || document.documentElement.clientWidth;
y = x/2;
el.style.fontSize = y + "%";
</script>
Dla <body> ustawiłem id="scale" i przechowuję ją w zmiennej el
x to wewnętrzna szerokość okna przeglądarki
y to połowa szerokości
na koniec przypisałem zmienną y do stylu <body>
Przy oknie o szerokości 1900px otrzymuję w body font-size: 950%;
Następnie w każdym kolejnym elemencie zawartym w <body> font-size ustawiam jako %.
Skrypt zadziała przy przeskalowaniu okna i przeładowaniu strony.
Do celu jakiego potrzebuję to wystarczy.
Zostawiam dla potomnych
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.