Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html] dopasowanie strony do ekranu
KeramxD
post
Post #1





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Witam, stworzyłem ułatwienie które mam zamiar używać na ios w przeglądarce. Obraz jest bardzo duży a chciałbym aby sie dopasowywal.

<html>
<table border="0" cellspacing="0" cellpadding="0">
<td>
<a href="http://grzegorz-zurek.asuscomm.com:8081/downloadmaster/index.asp"><img src="http://i.imgur.com/h8ZWGNh.jpg" alt="" /></a>
</td>
<td>
<a href="http://grzegorz-zurek.asuscomm.com"><img src="http://i.imgur.com/eb1eMU0.jpg" alt="" /></a>
</td>
</tr>
</table>
Go to the top of the page
+Quote Post
2 Stron V   1 2 >  
 Start new topic
Odpowiedzi (1 - 28)
tomi1985
post
Post #2





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <table style="width:100%;height:100%">
  2. ...
[HTML] pobierz, plaintext



powinno zadziałać

Ten post edytował tomi1985 29.08.2014, 17:50:40
Go to the top of the page
+Quote Post
KeramxD
post
Post #3





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Nie działa.


Adres strony:
router.zurek.co
Go to the top of the page
+Quote Post
tomi1985
post
Post #4





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

ponieważ kolego masz tam 2 duże obrazki które trzeba skompresować do rozmiaru przegladarki...

Najprostrzym rozwiązaniem "według mnie" będzie pobranie rozdzielczości ekranu za pomocą js, następnie od wartości szerokości odjąć Twój margines pomiędzy obrazkami, po czym podzielić tą wartość na pół i masz tu szerokość obrazka.

To wklej w nagłówku lub w pliku css
[HTML] pobierz, plaintext 
  1. <style>
  2. body {
  3. 	margin:0;
  4. 	padding:0;
  5.         text-align:center;
  6. }
  7. </style>
[HTML] pobierz, plaintext


a to na samym dole stronki i dodaj id obrazków które chcesz przeskalować
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var szer = screen.width/2;
  3. var wys	= window.innerHeight - 5;
  4.  
  5. document.getElementById("one").width 	= szer;
  6. document.getElementById("one").height 	= wys;
  7.  
  8. document.getElementById("two").width 	= szer;
  9. document.getElementById("two").height 	= wys;
  10. </script>
[HTML] pobierz, plaintext


Ten post edytował tomi1985 29.08.2014, 19:58:56
Go to the top of the page
+Quote Post
trueblue
post
Post #5





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. img{
  2.  max-width:100%;
  3.  height:auto;
  4. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
KeramxD
post
Post #6





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Nie rozumiem.
Mógłbyś mi to wkleić do tego kodu co podałem? Byłbym bardzo wdzięczny.
Go to the top of the page
+Quote Post
tomi1985
post
Post #7





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. max--width:100%
[HTML] pobierz, plaintext


i w jaki sposób to ma mu pomóc ?

a to w nagłówku strony "po znaczniku html" (IMG:style_emoticons/default/wink.gif) 
[HTML] pobierz, plaintext 
  1. <head>
  2. <style>
  3. body {
  4. 	margin:0;
  5. 	padding:0;
  6. 	text-align:center;
  7. }
  8.  
  9.  
  10. </style>
  11.  
  12.  
  13. </head>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. table id="demo" border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%">
  2. <td>
  3. <a href="http://grzegorz-zurek.asuscomm.com:8081/downloadmaster/index.asp"><img id="one" src="http://i.imgur.com/h8ZWGNh.jpg" alt=""  /></a>
  4. </td>
  5. <td>
  6. <a href="http://grzegorz-zurek.asuscomm.com"><img id="two" src="http://i.imgur.com/eb1eMU0.jpg" alt="" /></a>
  7. </td> 
  8. </tr>
  9. </table>
  10.  
  11. <script type="text/javascript">
  12. var szer = screen.width/2;
  13. var wys	= window.innerHeight - 5;
  14.  
  15. document.getElementById("one").width 	= szer;
  16. document.getElementById("one").height 	= wys;
  17.  
  18. document.getElementById("two").width 	= szer;
  19. document.getElementById("two").height 	= wys;
  20. </script>
[HTML] pobierz, plaintext


Można jeszcze użyć

[HTML] pobierz, plaintext 
  1. document.getElementsByTagName('img')
[HTML] pobierz, plaintext


dla wszystkich zdjęć, wówczas zaoszczędzić można w tym wypadku 2 linijki kodu (IMG:style_emoticons/default/wink.gif)

Ten post edytował tomi1985 29.08.2014, 20:08:49
Go to the top of the page
+Quote Post
KeramxD
post
Post #8





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Dobra, ale zobacz co się teraz stało. Obrazki schowały się pod siebie, a chodzi o to żeby były koło siebie.
Go to the top of the page
+Quote Post
KeramxD
post
Post #9





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Dobra, ale zobacz co się teraz stało. Obrazki schowały się pod siebie, a chodzi o to żeby były koło siebie.
Go to the top of the page
+Quote Post
tomi1985
post
Post #10





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

nie możliwe kolego ponieważ skopiowałem całą Twoją stronę i sprawdziłem u siebie (IMG:style_emoticons/default/wink.gif)

masz tu cały kodzik swojej strony + modyfikacja kompresji zdjęć

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. 	margin:0;
  7. 	padding:0;
  8. 	text-align:center;
  9. }
  10.  
  11. </style>
  12.  
  13. </head>
  14.  
  15. <body>
  16. <table id="demo" border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%">
  17. <td>
  18. <a href="http://grzegorz-zurek.asuscomm.com:8081/downloadmaster/index.asp"><img id="one" src="http://i.imgur.com/h8ZWGNh.jpg" alt=""  /></a>
  19. </td>
  20. <td>
  21. <a href="http://grzegorz-zurek.asuscomm.com"><img id="two" src="http://i.imgur.com/eb1eMU0.jpg" alt="" /></a>
  22. </td> 
  23. </tr>
  24. </table>
  25.  
  26.  
  27. 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  28. 	<!-- Apple Touch Icons -->
  29. 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  30. 	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
  31. 	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
  32. 	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
  33. 	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
  34. 	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-60x60.png" />
  35. 	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-120x120.png" />
  36. 	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-76x76.png" />
  37. 	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-152x152.png" />
  38. 	<!-- Windows 8 Tile Icons -->
  39.     	<meta name="msapplication-square70x70logo" content="smalltile.png" />
  40. 	<meta name="msapplication-square150x150logo" content="mediumtile.png" />
  41. 	<meta name="msapplication-wide310x150logo" content="widetile.png" />
  42. 	<meta name="msapplication-square310x310logo" content="largetile.png" />
  43. <script type="text/javascript">
  44. var szer = screen.width/2;
  45. var wys	= window.innerHeight - 5;
  46.  
  47. document.getElementById("one").width 	= szer;
  48. document.getElementById("one").height 	= wys;
  49.  
  50. document.getElementById("two").width 	= szer;
  51. document.getElementById("two").height 	= wys;
  52. </script>
  53. </body>
  54.  
  55. </html>
[HTML] pobierz, plaintext


Ten post edytował tomi1985 29.08.2014, 20:32:31
Go to the top of the page
+Quote Post
KeramxD
post
Post #11





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Działa, wielkie dzięki. Trochę rozciąga, ale to już wina wymiarów grafiki.
Go to the top of the page
+Quote Post
tomi1985
post
Post #12





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

zawsze mozna jakies proporcje ustawić jak chcesz (IMG:style_emoticons/default/wink.gif) i będzie git ale wówczas nie będzie w 100 % na całej stronie
Go to the top of the page
+Quote Post
KeramxD
post
Post #13





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Ale telefon trochę świruje:

(IMG:http://i.imgur.com/ZKUpm4m.jpg)
Go to the top of the page
+Quote Post
tomi1985
post
Post #14





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Podmień

[HTML] pobierz, plaintext 
  1. var szer = screen.width/2;
  2. var wys = window.innerHeight - 5;
[HTML] pobierz, plaintext


na 

[HTML] pobierz, plaintext 
  1. var ratio = window.devicePixelRatio || 1;
  2.  
  3. var szer 	= (screen.width*ratio)/2 - 0;
  4. var wys		= (window.innerHeight*ratio) - 5;
[HTML] pobierz, plaintext


i daj znać
Go to the top of the page
+Quote Post
KeramxD
post
Post #15





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

Na telefonie to samo, natomiast na komputerze zmieniło się przesunięcie.
Go to the top of the page
+Quote Post
tomi1985
post
Post #16





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

hmmm dziwne ponieważ na ipadzie jest już idealnie... ale na iphonie faktycznie lipa nadal ....

podmień to na to 

[HTML] pobierz, plaintext 
  1. var szer 	= document.documentElement.clientWidth/2 ;
  2. var wys		= document.documentElement.clientHeight - 5;
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
KeramxD
post
Post #17





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.09.2013

Ostrzeżenie: (0%)
-----

U mnie na na iPadzie też idealnie.

Śmiga, więlkie dzięki. A co gdybym w przyszłości chciał np dodać kolejną ikonkę? (3 fragment obrazka). Dodam kolejną tabelę z odnośnikiem a w skrypcie będę musiał coś mieszać?
Go to the top of the page
+Quote Post
tomi1985
post
Post #18





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----



musiałbyś to podzielić przez 3 (IMG:style_emoticons/default/wink.gif) to raz a dwa to dodać kolejne id

czyli np. 

[HTML] pobierz, plaintext 
  1. document.getElementById("three").width 	= szer;
  2. document.getElementById("three").height 	= wys;
[HTML] pobierz, plaintext


Ten post edytował tomi1985 29.08.2014, 20:57:46
Go to the top of the page
+Quote Post
trueblue
post
Post #19





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Cytat(tomi1985 @ 29.08.2014, 21:04:06 ) *
[HTML] pobierz, plaintext 
  1. max--width:100%
[HTML] pobierz, plaintext

Na pewno -- nie pomoże.
Ale widzę, że wolicie zamęczać stronę kodem JS, niż zapoznać się z podstawami wprowadzania responsywności do strony.
Go to the top of the page
+Quote Post
tomi1985
post
Post #20





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

łał ... literówka....

to sobie sprawdź czy to co podałeś pomoże aby zdjęcia zawsze były na całym oknie

gdzie np. zdjecie ma 2500x1500 x2 zdjęcia

a rozdzielczość ekranu np. 800x600

powodzenia (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
trueblue
post
Post #21





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

A ty sprawdzałeś?
http://jsfiddle.net/0551jhfo/
Go to the top of the page
+Quote Post
tomi1985
post
Post #22





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

a gdzie caly skrypt + mój js ?

a pozniej porównaj z swoim css'em (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
trueblue
post
Post #23





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Nie bardzo rozumiem, po co JS?
Nie widzisz stylów inline przy img?
Go to the top of the page
+Quote Post
tomi1985
post
Post #24





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/0551jhfo/1/ vs http://jsfiddle.net/0551jhfo/

porównaj to zrozumiesz

zrób mi taki sam efekt jak w pierwszym linku przy różnych rozdzielczościach ekranu + rożne wymiary zdjęć, również na urządzeniach mobilnych uzywając sztywnego css'a

aaaa i oczywiście nie wiesz jaką rozdzielczość zdjęcie będzie mieć jak i jaką rozdzielczość będzie miec monitor na którym będzie wyświetlana strona. Także wszystko musi być dynamicznie przypisywane.

pokaż proszę...

Ten post edytował tomi1985 29.08.2014, 22:13:48
Go to the top of the page
+Quote Post
trueblue
post
Post #25





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/br2rf3ds/
Go to the top of the page
+Quote Post
tomi1985
post
Post #26





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

i gdzie są te obrazki ? bo coś ich tam nie widać (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
trueblue
post
Post #27





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Ściągnij i odpal lokalnie.
Jeśli nie chcesz, to: http://jsfiddle.net/br2rf3ds/2/
Go to the top of the page
+Quote Post
tomi1985
post
Post #28





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

pionjowy scroll jest... choc i tak jestem pod wrazeniem (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
trueblue
post
Post #29





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Pionowy scroll jest tu akurat zjawiskiem naturalnym.

http://jsfiddle.net/br2rf3ds/3/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 4.10.2025 - 22:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn