Forum PHP.pl > [PHP][CSS] Skalowanie strony w przeglądarkach mobilnych

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP][CSS] Skalowanie strony w przeglądarkach mobilnych

adams1692

12.01.2016, 21:48:24

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 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<style>
body {
    margin: 0px;
    padding: 0px;
    background-color: #D9D9D9;
    width: 100%;
    font-size: 0.9em;
    font-family: "Open Sans",Arial,sans-serif;
}
 
.content {
    max-width: 620px;
    display: block;
    position: relative;
    margin: 0px auto;
    padding-top: 55px;
    background-color: #F3F3F3;
    box-shadow: 0px 1px 17px rgba(0, 0, 0, 0.1);
}
</style>
</head>
 
<body>
<div class="content main-content" align="center"><img src="http://mglks.pl/images/header.png"></div>
</body>
</html>
[HTML] pobierz, plaintext

Chodzi mi o DIV-a content żeby wyświetlał się tak jak na fcbarca.com/mobile/

in5ane

12.01.2016, 22:14:12

Przecież ten DIV się skaluje. Obrazek Ci się nie skaluje za pewne. To załatwi sprawę:

[CSS] pobierz, plaintext 
.content img
{
    max-width: 100%;
}
[CSS] pobierz, plaintext

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

adams1692

12.01.2016, 22:23:13

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

goartur

12.01.2016, 22:35:23

Dodaj do Head metatag:

[HTML] pobierz, plaintext 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
[HTML] pobierz, plaintext

adams1692

12.01.2016, 22:51:46

goartur, działa bardzo Ci dziękuję!

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.