Forum PHP.pl > [CSS][HTML][JavaScript]Strona dopasowująca się do rozdzielczości ekranu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML][JavaScript]Strona dopasowująca się do rozdzielczości ekranu

simonX

26.09.2010, 17:36:56

Troszkę poszperałem w internecie i znalazłem fajny sposób, a mianowicie takie coś

Kod

<LINK ID='styl_id' REL="Stylesheet" TYPE="text/css">
<script language="javascript">
var szer = window.screen.width;
if(szer == 640){document.getElementById('styl_id').href = "style640.css";}
else if(szer == 720){document.getElementById('styl_id').href = "style720.css";}
else if(szer == 1024){document.getElementById('styl_id').href = "style1024.css";}
else{document.getElementById('styl_id').href = "style_else.css";}
</script>

tylko nie wiem czemu jak ustawiłem długość na 720 taką jak mam w telefonie to strona wyświetla się ale bez stylów? Czy korzysta ktoś może z media type w stylach? Czy strony się prawidłowo wyświetlają?

ixtab

26.09.2010, 20:27:02

Ja proponuję zrobić dopasowanie bez JS, używając czystego CSS.
Tu akurat dopasowuje tylko szerokość, ale łatwo to przerobić na szerokość+wysokość. Kod jest elastyczny, tzn wraz ze zmniejszaniem przeglądarki zmniejsza stronę, nie zmieniając przy tym proporcji obrazów

[HTML] pobierz, plaintext 
body {
margin:0;
padding:0;
overflow-x:hidden; (opcjonalnie)
width:100%;
height:100%;
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
div_na_100%_ekranu {
max-width:100%;
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
[HTML] pobierz, plaintext

Dla IE6 używamy expressions

[HTML] pobierz, plaintext 
div_na_100%_ekranu {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
[HTML] pobierz, plaintext

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.