[HTML][PHP] Handykonforme Website

LaMiy · 22. Juni 2013, 11:46

Moin,
Ich würde gerne mal wissen wie ich es hinbekommen, dass wenn ein Handy auf meine Website geht, der Inhalt anders formatiert wird. D.h. so, dass man ihn ohne nach rechts und links zu wischen auf Handy oder Tablet lesen kann.
Hat da jemand Ahnung oder einen Link für mich ?
Edit: Hab das hier aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete/ gefunden, aber weiß nicht wie ich das anwenden soll.

rotherford · 22. Juni 2013, 12:03

Da musst du mit 'Responsive Design' (also: reagierendes Design) bzw. Media-Queries arbeiten.
Bsp (CSS):

Brainfuck-Quellcode

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.article {
font-size: 11px;
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
.article {
font-size: 20px;
}
}
/*..*/

Damit kannst du dann dynamisch auf alle devices eingehen und den Inhalt entsprechend formatieren.

ein paar Queries für die meisten gängigen Geräte: css-tricks.com/snippets/css/me…ies-for-standard-devices/
Btw: wenn du eine richtige "web app" machen willst, nimm jQuery Mobile (haters gonna hate ;o)

LaMiy · 22. Juni 2013, 12:06

@rotherford
Nice, danke.

Weitere Frage:
Können IOS und Android jquery-Inhalte anzeigen ?

Trade · 22. Juni 2013, 12:07

Ja das geht. Du kannst auch mit jQuery ne App builden bzw. das einbauen, also kannste das auch anzeigen.
Das jQuery ist nix anderes als eine JavaScript-Bibliothek welche komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt.

rotherford · 22. Juni 2013, 12:08

ja, klar. jQuery = javascript. Nur "Animationen" solltest du auslassen

Dafür solltest du CSS-Transitions verwenden (mobile.smashingmagazine.com/20…hardware-accelerated-css/)

LaMiy · 22. Juni 2013, 12:14

Danke. Erledigt.

Myrax · 22. Juni 2013, 14:16

Hey,

wenn du ein ordentlichen Responsive-Design haben möchtest, schau dir mal Bootstrap an. Bootstrap ist das UI-Framework was von Twitter für Twitter entwickelt wurde. Damit kannste echt gute Sachen machen. Ich benutze das auch und es ist echt einfach zu bedienen.

LaMiy · 22. Juni 2013, 14:31

Ja, das werde ich auch benutzen, sieht echt gut aus. Danke.

[HTML][PHP] Handykonforme Website

[HTML][PHP] Handykonforme Website

Brainfuck-Quellcode

Ähnliche Themen

4 Benutzer haben hier geschrieben