Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS] Skalowanie strony w przeglądarkach mobilnych
adams1692
post 12.01.2016, 21:48:24
Post #1





Grupa: Zarejestrowani
Postów: 52
Pomógł: 0
Dołączył: 4.04.2013
Skąd: Uniejów

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

Witajcie,

Mam pewien problem z którym nie mogę się uporać. Zanim zacznę powiem jakie strony będziemy porównywać moja strona www.mglks.pl/a.php (podstrona na której chciałbym uzyskać efekt) oraz strona biorca czyli www.fcbarca.com/mobile/

Generalnie chodzi o wyświetlanie się stron w przeglądarkach mobilnych fcbarca przy takich samych wartościach DIV-a jak moja strona wyświetla się na całej stronie mobilnej natomiast moja strona nie.

Pokażę wam wycinek kodu: 

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Dokument bez tytułu</title>
  6. <style>
  7. body {
  8.     margin: 0px;
  9.     padding: 0px;
  10.     background-color: #D9D9D9;
  11.     width: 100%;
  12.     font-size: 0.9em;
  13.     font-family: "Open Sans",Arial,sans-serif;
  14. }
  15.  
  16. .content {
  17.     max-width: 620px;
  18.     display: block;
  19.     position: relative;
  20.     margin: 0px auto;
  21.     padding-top: 55px;
  22.     background-color: #F3F3F3;
  23.     box-shadow: 0px 1px 17px rgba(0, 0, 0, 0.1);
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <div class="content main-content" align="center"><img src="http://mglks.pl/images/header.png"></div>
  30. </body>
  31. </html>
[HTML] pobierz, plaintext


Chodzi mi o DIV-a content żeby wyświetlał się tak jak na fcbarca.com/mobile/
Go to the top of the page
+Quote Post
in5ane
post 12.01.2016, 22:14:12
Post #2





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Przecież ten DIV się skaluje. Obrazek Ci się nie skaluje za pewne. To załatwi sprawę:
[CSS] pobierz, plaintext 
  1. .content img
  2. {
  3.     max-width: 100%;
  4. }
[CSS] pobierz, plaintext


@edit: zamiast align="center" użyj text-align: center; w stylach - wygląda to dużo lepiej tongue.gif

Ten post edytował in5ane 12.01.2016, 22:14:56


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
adams1692
post 12.01.2016, 22:23:13
Post #3





Grupa: Zarejestrowani
Postów: 52
Pomógł: 0
Dołączył: 4.04.2013
Skąd: Uniejów

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

Nie do końca o to chodziło. Chodzi mi o to żeby ten DIV wyświetlał się na całej stronie w przeglądarce mobilnej zwróć uwagę że na fcbarca/mobile/ DIV o wartości 620px wyświetlany jest na całej szerokości strony a u mnie wyświetla się z szarymi polami po bokach. Na przeglądarce desktopowej tego nie wydać ale na telefonie jest różnica. Dorzucam screeny.

Tak jest u mnie:


Tak jest na fcbarca



Ten post edytował adams1692 12.01.2016, 22:30:18
Go to the top of the page
+Quote Post
goartur
post 12.01.2016, 22:35:23
Post #4





Grupa: Zarejestrowani
Postów: 233
Pomógł: 27
Dołączył: 19.10.2014

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

Dodaj do Head metatag:

[HTML] pobierz, plaintext 
  1. <meta name="viewport" content="width=device-width, initial-scale=1">
  2.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
adams1692
post 12.01.2016, 22:51:46
Post #5





Grupa: Zarejestrowani
Postów: 52
Pomógł: 0
Dołączył: 4.04.2013
Skąd: Uniejów

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

goartur, działa bardzo Ci dziękuję!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 26.04.2025 - 04:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn