it-swarm.com.de

Ist es in Ordnung, jQuery für responsives Webdesign zu verwenden?

Ich wurde beauftragt, eine Site zu aktualisieren, damit sie auf Smartphones reagiert und korrekt angezeigt wird. Leider ist die Site in ihrer jetzigen Form nicht sehr einfach zu bearbeiten - ich kann nicht einfach das CSS ändern.

Wird es als schlecht angesehen, die Browsergröße zu erkennen und die CSS-Änderungen mit jQuery vorzunehmen?

Z.B.:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
11
MeltingDog

Sicher. Natürlich ist es besser, nur CSS zu verwenden. Wenn dies nicht möglich ist, verwenden Sie das, was Sie haben. Tun Sie so viel wie möglich mit CSS und verwenden Sie JS nach Bedarf. Ich bin mir nicht sicher, warum Sie das vorhandene CSS nicht ändern können, aber Sie können mit JS ein Stylesheet hinzufügen.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

Quelle: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

dann verrückt nach CSS/Medien-Abfragen.

Oder mit jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

Ich habe reaktionsschnelle Skins erstellt, bei denen einige Dinge einfach nicht möglich waren, ohne das DOM zu ändern. Wenn Sie keinen Zugriff auf HTML haben, ist die JS DOM-Manipulation manchmal die einzige Antwort.

EDIT:
Abhängig von den visuellen Anforderungen Ihrer kleinen Bildschirmversion werden Sie möglicherweise überrascht sein, inwieweit Sie dieses CSS-Snippet auf dem Weg zu "Handy-freundlich" weiterbringt.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

Wenn der ursprüngliche CSS-Entwickler !important zu sehr mochte und Sie nicht an den HTML-Code gelangen, können Sie jQuery/JS verwenden, um eine ID zum Hauptteil oder zum übergeordneten Container hinzuzufügen und diese Ihrer Auswahl hinzuzufügen.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
13
Will

Ich würde sagen, versuchen Sie es zuerst mit Medienabfragen. Eine Methode, die ich bei der Arbeit mit einem Design, das ursprünglich nur für den Desktop gedacht war, einfacher fand, war die folgende:

Beginnen Sie mit zwei separaten Stylesheets. Eine für das neue responsive Design und die andere für die alte Desktop-Version:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

Alle alten Stile können in desktop.css enthalten sein. In der Zwischenzeit können Sie mit mobile.css von vorne beginnen. Möglicherweise können Sie in diesem mobilen CSS, das auch für Tablets geeignet ist, ein einspaltiges Nice-Layout erstellen.

Dieser Ansatz ermöglicht Ihnen einen Neuanfang und Sie können nur für Handys und Tablets Stile erstellen, ohne dass die Desktopstile durchkommen und Dinge außer Kraft setzen. Sie können Elemente nach Bedarf nur für Handys ein-/ausblenden/positionieren.

Wenn Sie den Desktop-Code wirklich ändern müssen, damit er mit Mobilgeräten und Desktops funktioniert, können Sie das Markup überarbeiten. Wenn Sie jedoch feststellen, dass Sie den HTML-Code für die responsive und die mobile Version nicht realistisch umgestalten können, können Sie eine Klasse in den Desktop-Code einfügen, z. Klasse "Desktop" und verwenden Sie CSS in der mobilen Version, um es auszublenden. Schreiben Sie dann einen neuen HTML-Code für diesen Abschnitt und geben Sie ihm einen class="mobile". Dann stylen Sie es in der mobile.css entsprechend und verstecken es in der desktop.css.

4
lightspeeder

Ich habe an einer Website mit dieser Methode gearbeitet und Probleme mit der Bildschirmrotation auf Mobilgeräten gehabt. Da JavaScript beim Laden der Seite nur ein Mal erkennt, wird das Gerät beim Drehen nicht auf die volle Breite erweitert, wie dies bei Medienabfragen der Fall ist. Zu der Zeit war es für mich einfacher, einfach auf CSS umzusteigen, aber vielleicht würde ein JS-Experte wissen, ob es eine Möglichkeit gibt, eine Änderung der Ansichtsfensterbreite zu erkennen. Es scheint, als ob es einen Weg mit AJAX geben sollte, aber ich würde gerne wetten, dass alles, was Sie gefunden haben, in Bezug auf die Leistung übertrieben ist, wie Megasteve es beschreibt.

3
stephanie

Reaktionsfähigkeit und "Auf Smartphones richtig angezeigt" sind völlig unterschiedliche Aufgaben.

  1. Vermutlich bezieht sich die Reaktionsfähigkeit auf die Eliminierung zusätzlicher Roundtrips zum Server, sofern dies möglich ist. Fehlerüberprüfung, Ajax zum Abrufen der angeforderten Daten und dynamische DOM-Manipulation sind die Aufgaben, die in der Regel die Reaktionsfähigkeit verbessern. Die Verwendung von JavaScript (oder JavaScript-Framework) ist eine effektive Möglichkeit, dies zu tun. In den letzten Jahren bin ich für diese Implementierungen von JavaScript auf jQuery umgestiegen. In vielen Fällen verfügt jQuery über eine integrierte Browserkompatibilität, die offensichtliche Vorteile bietet. Die Plugins für Datepicker, Autocomplete und Menüs sparen stundenlange Entwicklungsarbeit.

Es sollte nicht die Hauptquelle für das Styling sein. Das ist die Aufgabe von CSS. Die zwei können jedoch effektiv zusammen verwendet werden. In einem einfachen Beispiel kann der Text je nach den Ergebnissen einer Aktion unterschiedlich gestaltet sein. Mit jQuery kann die CSS-definierte Klasse geändert werden.

$('#result').removeClass('red').addClass('green');
  1. Es ist verlockend, eine Standardseite für Handys erneut zu verwenden, indem Sie das Design dynamisch ändern. Ich habe die Erfahrung gemacht, dass dies eine unbefriedigende Lösung darstellt. Das CSS ist völlig anders und es ist ein anderes clientseitiges Scripting erforderlich, um die mobilen Funktionen nutzen zu können. Ich bevorzuge es, separate dedizierte HTML-Seiten zu erstellen, anstatt eine Seite zu erstellen, für die Logik erforderlich ist, um das zu verwendende Design oder die zu verwendenden Funktionen auszuwählen.
2
stephanie perry

Wir haben für unsere Sites das beliebte 960.gs css framework verwendet.

Wir wollten darauf reagieren.

Jemand hatte ein JS-basiertes responsive Plugin für die 960 gs erstellt, also dachten wir uns, warum sollten wir das nicht einfach verwenden, da wir keine Änderungen an den strukturellen Websitevorlagen vornehmen müssten.

Es funktionierte, war aber in den meisten Browsern, einschließlich der guten, lahm. In der Regel wird ein Flash mit nicht formatiertem Inhalt angezeigt, der je nach Komplexität der Seite stark variiert.

Obwohl die JS-Lösungen nicht optimal funktionieren, sind CSS 3-Medienabfragen nach Möglichkeit die beste Wahl. Am Ende haben wir unsere Websitevorlagen mit Twitter Bootstrap überarbeitet, was sehr gut zu unseren Anforderungen passte.

Obwohl es verlockend sein mag, Abkürzungen zu nehmen, ist es auf lange Sicht oft zeitaufwändiger/schmerzhafter.

1
megasteve4