Nowa wersja bloga jest już aktywna.
LASAIR.PL
Serdecznie zapraszam!

intrukcje szablony loga do druku poradniki nadruki
Jak stworzyć wersję mobilną?
Nikt nie krzyczał, że coś złego dzieje się z RT na telefonie, dlatego prosz, instrukcja na wersję mobilną! :D Robota bardzo prosta, bo polega na wcześniejszej instrukcji "Jak dopasować szablon do każdej rozdzielczości demo 1 demo 2


Krok 1. 
Wchodzimy w szablon, następnie klikamy na koło zębate, które znajduje się pod okienkiem z podglądem szablonu 'na komórkach' i z opcji wybieramy "Nie, na urządzeniach mobilnych pokazuj szablon w wersji na komputery."


Krok 2. Wchodzimy w html i nad <head> wklejamy:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>

To sprawia, że nie można przybliżać ekranu, więc pamiętajcie, by czcionki były duże! Dodanie tego jest koniecznie, ponieważ na telefonie wyświetla się teraz wersja na komputer, więc wszystko będzie zmniejszone (czcionkę można powiększyć do 200px, ale z obrazkami już będzie problem). Dzięki temu kodowi wszystko będzie miało prawdziwą wielkość.  

Krok 3. Wchodzimy w css i dodajemy poniższy kod: 

@media only screen and (max-device-width: 400px){
  kod css
}

Możecie tutaj ukrywać [ selektor{ display:none;} ] lub zmieniać wszystkie elementy na blogu. Pamiętajcie, że musicie używać tych samych selektorów, co w normalnym kodzie css oraz używać tych samych jednostek np.:

#Blog1 { margin-left: 20%; }
@media only screen and (max-device-width: 400px){
#Blog1 { margin-left: 0%; }
}

5 komentarzy:

  1. Powiem Ci, że bardzo długo szukałam jakiejś wiedzy na ten temat (chyba nawet o tym wspominałam na katalogowej konfie). Znalazłam, a gdy zabrałam się za zabawę z głównym Pandy i MRUwiska to mnie po prostu chuj strzelił i chyba nieprędko do tego wrócę. :D

    Niemniej jednak dla mnie fajna, jasna instrukcja. Jestem zaskoczona, że nie masz tu jeszcze żadnych komentarzy!

    OdpowiedzUsuń
    Odpowiedzi
    1. Pamiętam, jak o tym pisałaś, ja sama wtedy jeszcze prowadziłam walkę u siebie XD Zresztą ona i tak jest nieskończona, ponieważ tą metodą ogarnia się szablon w pionie, RT nie da się zrobić w poziomie (strona główna), dlatego nic z tym nie kombinowałam. Ale pamiętam, że były na to jakieś kody, więc jak to ogarnę to zaktualizuje instrukcje :D
      Wracaj jak najprędzej, ja odkąd mam nowy telefon często (np. w szkole) patrze na blogi i wersja mobilna naprawdę dużo zmienia :D Po tym tygodniu będą wystawiane oceny, więc mam zamiar wtedy zabrać się za poprawę szablonu na KG, a co za tym idzie zrobienia też wersji mobilnej xD Na MRUwisku to nie powinno być strasznie trudne, natomiast na Pandzie - to faktycznie, sama bym się tam bała zabrać za wersje mobilną xD

      Usuń
  2. No to robimy wersję mobilną dla One Rehash xD
    Podobnie jak Kicia, też długo szukałam instrukcji, która by jasno opisywała etapy tworzenia wersji mobilnej. ;) Mam nadzieje, że mi się to uda na... No za jakiś czas. ;)

    OdpowiedzUsuń
  3. Mam pytanie niezwiązane z tematem notki: co za utwór leci w tle na starcie?

    OdpowiedzUsuń