Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Odpowieni html do rozdzielczosci
Forum PHP.pl > Forum > Przedszkole
adek-
Witam jestem totalny newbie z PHP i kombinuję ze skryptem który mi wykrywa rozdzielczość i odpowiedni do wykrytej wysokości ekranu wyświetli odnośnik do strony która się otwiera w nowym i zeskaluje się (heght poniżej 900 - np small_res.html), oraz takiej powyżej 900 gdzie będzie bez skalowania się np hi_res.html.

Mam coś takiego co absolutnie działa:
  1. if(screen.height>=900) { location.href='hi_res.html' }
  2. if(screen.height<=899) { location.href='small_res.html' }



Ale chodzi mi o wygenerowanie linka który będzie robił to po kliknięciu a nie od razu stronę wrzucał po wejściu. Więc kombinowałem coś takiego:
Wykrywa mi rozdzielczość i nadaje zmienną, ale nie bardzo mi chce wyświetlać link.

Zrobiłem tak sekcja HEAD
  1. <script type="text/javascript">
  2. document.location="index.php?screen_x="+screen.width+"&screen_y="+screen.height;
  3. </script>


Sekcja BODY
  1. <?php
  2. if ($_GET["screen_y"]>=900){
  3. echo ("<a href="hi_res.html" onClick="NewWindow(this.href,'main','no','center');return false" onFocus="this.blur()"><img src="images/wejscie.gif" style=" border: none;"></a>");
  4. else {
  5. //rozdzialka mniejsza
  6. echo ("<a href="small_res.html" onClick="NewWindow(this.href,'main','no','center');return false" onFocus="this.blur()"><img src="images/wejscie.gif" style=" border: none;"></a>");
  7. }
  8. ?>


To jest mój pierwszy dzień z PHP więc zaledwie parę godzi czytałem tutoriale początkowe i to tylko dlatego, że potrzebuję zrobić ten odnośnik w zależności od rozdzielczości.
Proszę o pomoc co pokiełbasiłem w php bo tylko to mi nie działa ;/
Kshyhoo
Ka kiedyś korzystałem z takiego prostego skryptu:
  1. if ($_REQUEST['xy']=="") {
  2. echo <<<KONIEC
  3.   <script language="javascript" type="text/javascript">
  4.   <!--
  5.   roz = screen.width+"x"+screen.height;
  6.   document.write('<form name="test" action="index.php" method="post">')
  7.   document.write('<input type="hidden" name="xy" value="'+roz+'" /></form>')
  8.   document.cookie="xy="+roz;
  9.   document.test.submit()
  10.   // -->
  11.   </script>
  12. KONIEC;
  13. }
  14.  
  15. echo "Twoja rozdzielczość: ".$_REQUEST['xy'];
adek-
Nie bardzo wiem jak to działa, umieściłem to w sekcji body. I ma to za zadanie wykrycie rozdzielczości i wyświetlenie mi jej na ekranie?

Mnie chodzi bardziej o przekierowania i udało mi się to właśnie zrobić, ale trochę na okrętkę, mianowicie DZIAŁA w ten sposób:

1. Mam plik "index.html" który ładnie mnie wita i pokazuje odnośnik WEJSCIE
2. Po kliknięciu na WEJSCIE jest przejście do strony chose_res.html , która otwiera się w FULL SCREEN i jest tam zawarty kod:
  1. if(screen.height>=900) { location.href='hi_res.html' }
  2. if(screen.height<=899) { location.href='low_res.html' }

który automatycznie mnie przenosi albo do hi_res.html albo do low_res.html .

Zrobiłem to dlatego bo jest to strona we flashu i jeśli rozdzielczość height jest poniżej 900 ucina mi dół strony. Teraz po wejściu na low_res mam ustawione skalowanie strony na 100% więc się dostosuje do każdej małej rozdzielczości, a plik hi_res zawiera standardowe wymiary, jako że strona działa poprawnie na wyższych rozdzielczościach...

Nie mniej jednak pomimo iż udało mi się zrobić to innym sposobem, mógł by mi ktoś poprawić to co w pierwszym poście skubałem, albo raczej próbowałem - tak przyszłościowo?
Dziękuję i pozdrawiam smile.gif
Kshyhoo
Ten JS wykrywa rozdzielczość, potem już z górki, np.:
  1. switch ($_REQUEST['xy']) {
  2. case '640x480':
  3. $kolumn1 = '2'; // 2 x 200 = 400
  4. $kolumn2 = '8'; // 8 x 50 = 400
  5. break;
adek-
Tak jak mówię jest to mój pierwszy dzień z PHP i jeszcze nie bardzo rozumię, ale to działa na chłopski rozum tak:

  1. if ($_REQUEST['xy']=="") {
  2. //jeśli prośba xy równa się
  3.  
  4. echo <<<KONIEC
  5.   <script language="javascript" type="text/javascript">
  6.   <!--
  7.   roz = screen.width+"x"+screen.height;
  8. //tworzę zmienną roz która zbiera mi informację szerokość x wysokość ekranu
  9.  
  10.   document.write('<form name="test" action="index.php" method="post">')
  11. //zapisuję ją do pliku index.php
  12.  
  13.   document.write('<input type="hidden" name="xy" value="'+roz+'" /></form>')
  14. //robię ukryty warunek gdzie ta rozdzielczość się zapisze ale nie wyświetli
  15.  
  16.   document.cookie="xy="+roz;
  17. // wrzucam info o zmiennej xy i roz do cookie przeglądarki? ;)
  18.  
  19.   document.test.submit()
  20.   // -->
  21.   </script>
  22. KONIEC;
  23. }
  24.  
  25. echo "Twoja rozdzielczość: ".$_REQUEST['xy'];
  26. //wyświetlam rozdzielczość z tekstem "Twoja rozdz to ....

Coś mnie więcej w tym stylu tak?

Nie rozumie tylko za bardzo tego:
  1. switch ($_REQUEST['xy']) {
  2. case '640x480':
  3. $kolumn1 = '2'; // 2 x 200 = 400
  4. $kolumn2 = '8'; // 8 x 50 = 400
  5. break;

Robię sobie warunek ktory w przypadku rozdzielczosci 640x480 stworzy 2 mienne kolumn1 i 2? I nie mam pojęcia czemu jest przypisane poszczególnie 2 i 8 do nich po czym równie 2x200=400 i 8 x 50, czemu x200 i x50? To mi będzie przeskalowywało stronę wewnątrz pliku index.html ?

Przepraszam za nobowskie pytania ale to mój pierwszy dzień z PHP
Kshyhoo
Już tłumaczę "na chłopski rozum":
  1. // rozpoczynamy instrukcję SWITCH (zakładam, że wiesz co to za cudo)
  2. // jeśli w $_REQUEST będzie paramert 'xy'
  3. switch ($_REQUEST['xy']) {
  4. // to w przypadku parametru '640x480'
  5. case '640x480':
  6. // $kolumn1 przypisz '2'
  7. $kolumn1 = '2'; // 2 x 200 = 400
  8. $kolumn2 = '8'; // 8 x 50 = 400
  9. break;

Czyli, jeżeli rozdzielczość monitora będzie 640x480, zmienna $kolumn1 będzie miała wartość '2'... czyli tabela będzie miała 2 kolumny, itd...
Oczywiście metod na wykorzystanie jest więcej winksmiley.jpg
adek-
Witam, na samym początku chciałem powiedzieć, że "to moje poprzednie rozwiązanie nie działa pod IE!"
dlatego wróciłem po Twoją pomoc Kshyhoo..
złożyłem sobie to wszystko wrzuciłem do sekcji BODY i naprawdę ładnie mi działa.

  1. <?
  2. if ($_REQUEST['xy']=="") {
  3. echo <<<KONIEC
  4.   <script language="javascript" type="text/javascript">
  5.   <!--
  6.   roz = screen.width+"x"+screen.height;
  7.   document.write('<form name="test" action="zphp.php" method="post">')
  8.   document.write('<input type="hidden" name="xy" value="'+roz+'" /></form>')
  9.   document.cookie="xy="+roz;
  10.   document.test.submit()
  11.   // -->
  12.   </script>
  13. KONIEC;
  14. }
  15. echo "Twoja rozdzielczość: ".$_REQUEST['xy'];
  16. ?> // ##### tutaj ten znaczknik mam podświetlnony na czarno, a z regóły są na czerwono, czy coś to zmienia, może to jest jakiś błąd? pomimo iż skrypt i tak działa.
  17.  
  18.  
  19. <?
  20. switch ($_REQUEST['xy']) {
  21. case '640x480':
  22. $res = 'low_res.html';
  23. break;
  24. case '1280x1024':
  25. $res = 'hi_res.html';
  26. break;
  27. }
  28. ?>
  29. <br><br>
  30. <?
  31. echo "<a href=\"$res\"> ZAPRASZAM </a>";
  32. ?>


Mógłbym teraz porobić kilkanaście case'ów z rozdzielczościami ekranów, ale co jeśli użytkownik będzie miał nietypową rozdzielczość?
Czy da się coś takiego z robić na zasadzie jeśli wysokość, a nie wysokość i szerokość ekranu jest większa niż 900px -> hi_res.html, a jeśli mniejsza od 899 -> low_res.html.
Tak jak robił to ten mój wcześniejszy skrypt który niestety nie działa pod IE
  1. 1.
  2. if(screen.height>=900) { location.href='hi_res.html' }
  3. if(screen.height<=899) { location.href='low_res.html' }
  4. </script>
Kshyhoo
Możesz "przewidzieć" lub wykonać skrypt na jakąś konkretną ilość rozdzielczości, np.:
  1. if ($_REQUEST['xy']=="") {
  2. echo <<<KONIEC
  3.   <script language="javascript" type="text/javascript">
  4.   <!--
  5.   roz = screen.width+"x"+screen.height;
  6.   document.write('<form name="test" action="herb.php" method="post">')
  7.   document.write('<input type="hidden" name="xy" value="'+roz+'" /></form>')
  8.   document.cookie="xy="+roz;
  9.   document.test.submit()
  10.   // -->
  11.   </script>
  12. KONIEC;
  13. }
  14. switch ($_REQUEST['xy']) {
  15. case '640x480':
  16. $kolumn1 = '2'; // 2 x 200 = 400
  17. $kolumn2 = '8'; // 8 x 50 = 400
  18. break;
  19. case '800x640':
  20. $kolumn1 = '3';
  21. $kolumn2 = '12';
  22. break;
  23. case '1024x768':
  24. $kolumn1 = '4';
  25. $kolumn2 = '14';
  26. break;
  27. case '1280x1024':
  28. $kolumn1 = '4';
  29. $kolumn2 = '14';
  30. break;
  31. case '1600x1200':
  32. $kolumn1 = '5';
  33. $kolumn2 = '18';
  34. break;
  35. case '1400x900':
  36. $kolumn1 = '5';
  37. $kolumn2 = '18';
  38. break;
  39. case '1680x1050':
  40. $kolumn1 = '5';
  41. $kolumn2 = '18';
  42. break;
  43. case '1600x1200':
  44. $kolumn1 = '5';
  45. $kolumn2 = '18';
  46. break;
  47. case '1920x1080':
  48. $kolumn1 = '6';
  49. $kolumn2 = '24';
  50. break;
  51. case '2048x1536':
  52. $kolumn1 = '6';
  53. $kolumn2 = '24';
  54. break;
  55. default:
  56. $kolumn1 = '3';
  57. $kolumn2 = '12';
  58. }

Albo pobawić się i wymyślić jakiś bardziej wyrafinowany sposób. Z reguły jednak to powyższe wystarcza.
I potem możesz np. umieszczać ilość kolumn tabeli w zależności od rozdzielczości:
  1. echo '<table style="border: none"><tr>';
  2. for ($i=0;$i<count($listpl);$i++) {
  3.  
  4. if (!($i % $kolumn1)) echo '</tr><tr>';
  5. echo '<td style="border: 1px solid black; text-align: center">treść</td>';
  6. }
  7. echo '</tr></table>';
adek-
A takie coś nie było by lepsze?

  1. <?
  2. if ($_REQUEST['y']=="") {
  3. echo <<<KONIEC
  4.   <script language="javascript" type="text/javascript">
  5.   <!--
  6.   roz = screen.height;
  7.   document.write('<form name="test" action="index.php" method="post">')
  8.   document.write('<input type="hidden" name="y" value="'+roz+'" /></form>')
  9.   document.cookie="y="+roz;
  10.   document.test.submit()
  11.   // -->
  12.   </script>
  13. KONIEC;
  14. }
  15. echo "Twoja rozdzielczość: ".$_REQUEST['y'];
  16. ?>
  17.  
  18. <?
  19. if ($y >= '900') {
  20. echo "<a href=\"hi_res.html\"> ZAPRASZAM </a>";
  21. } elseif ($y < '899') {
  22. echo "<a href=\"low_res.html\"> ZAPRASZAM </a>";
  23. }else{
  24. echo "<a href=\"low_res.html\"> ZAPRASZAM </a>";
  25. }
  26. ?>


Brak znajomości PHP zabrał mi 1h czasu pracy nad dojściem do takiej prostej funkcji IF ... ale sprawdzałem działa (bynajmniej u mnie smile.gif

Kurcza, dziękuję Ci za na kierunkowanie na to rozwiązanie... Doceniam Twój wielki wkład i pracę - jesteś WIELKI smile.gif
Jak by się okazało, że coś znowu będzie nie tak to pozwolę sobie znowu potruć Ci pupę, jeśli to nie jakiś większy problem dla Ciebie smile.gif
Dziękuję Kshyhoo.

-------------EDITED 21.03.2010 14.54 --------------
Ja jak zwykle z przedwczesnym wyskokiem "Hurrra" ... czemu lokalnie mi to działa tak jak powinno, a jak wyślę na serwer to zawsze - niezależnie od rozdzielczości pokazuje mi w odnośniku low_res.html questionmark.gif
Czy to może być z braku register globals włączonych na serwerze hostingodawcy? Jak temu zaradzić?

Podaję stronę na którą sobie to wrzucałem ... www.restauracjachata.pl
Kshyhoo
Instrukcja switch robi samo co if, ale bardziej przejrzysta dla większej ilości "jeśli" winksmiley.jpg
Łatwiej Ci będzie używać pojedynczych ciapków:
  1. echo '<a href="hi_res.html"> ZAPRASZAM </a>';

Po za tym, zobacz, co zwraca $_REQUEST['xy']exclamation.gif Nie pojedynczą wartość, ale właśnie np. 800x600, więc warunek powinien być inaczej skonstruowany, właśnie tak jak ja podałem w instrukcji switch.
Jeżeli chcesz tylko przekierować usera na odpowiednią stronę, odpowiednią do rozdzielczości, polecam taki kodzik (musisz dopasować go do swoich potrzeb):
Kod
<script language="javascript" type="text/javascript">
<!--
if (screen.width==800 && screen.height==600) {
  window.location="index800.html";
} else if (screen.width==1024 && screen.height==768) {
  window.location="index1024.html";
} else {
  window.location="inna.html";
}
// -->
</script>
adek-
Zgadzam się że $_REQUEST['xy'] zwraca coś zupełnie innego, dlatego jak we wklejonym kodzie post wyżej zmieniłem stare na $_REQUEST['y'] - proszę sprawdzić mój wcześniejszy post dokładniej i wszędzie odwołania na pojedynczą wartość do pobrania i przekazania tylko wysokości ekranu nie wysokości i szerokości...
Warunek z casami jest super, ale musiał bym teraz sprawdzać wszystkie rozdzielczości i powrzucać case za case'm na co ma się przekierować każdy z nich, a jak widać u Ciebie jest tych casów sporo i do tego nie obejmują wszystkich rozdzielczości (np laptopowej wide 1280x736, czy laptopowej wide 10" czyli 1024x600 i wielu innych) a przy tworzeniu tego prostego if podaję tylko trzy wartość i to wszystko działa, poza jednym.

Jedyne co się kaszani to to, że lokalnie działa, a na serwerze zewnętrznym nie. Dlatego wydaję mi się, że to przez wyłączone register globals (hostingodawca ma wylączone, ja włączone). Zostaje mi poprosić o włączenie globalek, albo zmienić kod powyżej... z tym , że php to nie moja domena i mam problem z prostymi rzeczami... czy faktycznei $_REQUEST['y'] wymaga globalek na on, czy tam cokolwiek jest nie tak ze skyptu który wkleiłem post wyżej?

PS Co do tego JS to ja podałem podobny wcześniej, ale pod IE krzyczy żeby nie wchodzić na stronę bo zawiera elementy ActiveX (ten skrypt zapewne) i monit z potwierzdzeniem czy aby na pewno się zgadzamy uruchomić ActiveX. Większość zwykłych ludzi - komputerowych laików wciśnie NIE i wyjdzie ze strony w obawie o jakieś zawirusowanie... miałen skrypcik i 2 osoby mi dzwoniły że mam "wirusa" na stronie! A chyba kiepsko by wyglądał napis w index.html że ActiveX to nie wirus smile.gif

Sprawdzałęm ten Twój i go przerobiłem w ten sposób...
  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. if (screen.height>=900) { window.location="hi_res.html.html";}
  4. else if (screen.height<=899) { window.location="low_res.html";}
  5. else { window.location="normal.html";}
  6. // -->
  7. </script>

Działa super, tak jak tamten mój wcześniejszy
  1. <script language="javascript" type="text/javascript">
  2. if(screen.height>=900) { location.href='hi_res.html' }
  3. if(screen.height<=899) { location.href='low_res.html' }
  4. </script>

Tylko tak jak mówię, skrypt zarówno ten i ten skutecznie odpycha ze strony laików... ;/
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.