/ / Website-Design für verschiedene Geräte? - css, design, mobile, mobile-website

Website-Design für verschiedene Geräte? - css, Design, Handy, Handy-Website

Was muss ich tun, damit meine Website richtig passt?für verschiedene Bildschirme .. z. B. 32 "24" 17 "-Monitore sowie für mobile Geräte (Netbooks usw.) mit 9" - 11 "-Bildschirmen und Mobiltelefonen mit einem Bildschirm zwischen 2,5" - 5 "

Wie soll ich das Layout meiner Homepage / Vorlage gestalten? Was muss ich beachten? Was würde ich für diese CSS-, Javascript- oder Serversprachen benötigen, um den Gerätetyp zu lesen?

Alle anderen Empfehlungen, die Sie vorschlagen möchten, um die Site für verschiedene Gerätetypen zugänglich und nutzbar zu machen.

Vielen Dank im Voraus für Ihre Hilfe.

Antworten:

1 für die Antwort № 1

Nichts persönliches, aber die meisten Antworten auf Fragen zum mobilen Webdesign beziehen sich nur auf iPhone oder Android. Mobiles Internet ist nicht nur iPhone oder Android. Es gibt viele Geräte (tatsächlich mehr als iPhone und Android zusammen), die View-Port- oder Medienanfragen nicht verstehen und im mobilen Internet aktiv sind

Wenn Sie auf möglichst viele Geräte zugreifen möchten.

  • leichte Seiten gestalten
  • Verwenden Sie keine horizontalen Layouts. wie 2-3 Boxen nebeneinander. Stellen Sie alles vertikal, damit sie auf kleine Bildschirme passen
  • Verwenden Sie kein schweres Java-Skript, vermeiden Sie es so weit wie möglich
  • Verwenden Sie nicht zu viele Grafiken
  • Vermeiden Sie die Verwendung von min-width und / oder max-witdh in Ihrer CSS

2 für die Antwort № 2

es ist nicht notwendig, js zu schreiben, das Sie einfach tun könnenmit CSS. In Meta definieren wir, dass sich die Website an den Viewport des Geräts anpasst. Wenn Sie das Design ändern möchten, schreiben Sie verschiedene CSS für die Dinge, die Sie ändern möchten, zum Beispiel:

für mobiles Gerät

<meta name="viewport" content = "user-scalable=no, width=device-width" />"
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;

für Fenstergröße ändern

 <link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;

<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;

Für weitere Informationen müssen diese Links "gesehen werden http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm