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

11

Ich wurde beauftragt, eine Website zu aktualisieren, damit sie reagiert und auf Smartphones korrekt angezeigt wird. Leider ist die Site in ihrer aktuellen 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 
}
css mobile jquery optimization responsive-webdesign MeltingDog
quelle
7
Sie sollten in Betracht ziehen, stattdessen Medienabfragen zu verwenden, da dies seit Juni 2012 ein von W3C empfohlener Standard ist.
Zistoloen
Sie wollen Stylesheets wechseln? Ich dachte das auch, aber ich würde noch viele Elemente ändern müssen
MeltingDog
Ja. Ich denke auf jeden Fall, dass Sie viele CSS-Änderungen haben werden.
Zistoloen
2
Dem Satz "Ich wurde beauftragt, eine Site zu aktualisieren, damit sie reagiert" sollte nicht gefolgt werden von "Ich kann das CSS nicht einfach ändern"
Francisco Presencia,
4
alles braucht mehr jQuery ( Haftungsausschluss: nimm das nicht ernst )
Darkhogg

Antworten:

13

Sicher. Natürlich ist es besser, CSS alleine zu verwenden, aber wenn Sie nicht können, verwenden Sie das, was Sie haben. Machen Sie so viel wie möglich mit CSS und verwenden Sie JS nach Bedarf. Sie sind sich 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 / Medienabfragen.

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.

BEARBEITEN:
Abhängig von den visuellen Anforderungen Ihrer Version mit kleinem Bildschirm werden Sie möglicherweise überrascht sein, wie weit dieses CSS-Snippet Sie auf dem Weg zu "mobilfreundlich" bringt.

/* 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 es zu sehr mochte !importantund Sie nicht zum HTML gelangen können, können Sie mit jQuery / JS dem Body oder dem übergeordneten Container eine ID hinzufügen und diese Ihrem Selektor hinzufügen.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
Wille
quelle
Aus meiner Erfahrung kann Responsive Design nur mit CSS durchgeführt werden. Sobald Ihr Design auch anpassungsfähig werden muss, benötigen Sie wahrscheinlich auch Javascript. Denken Sie daran, dass Sie das Javascript so gering wie möglich halten möchten.
Marco
4

Ich würde sagen, versuchen Sie zuerst, Medienabfragen zu verwenden. Eine Methode, die ich beim Umgang mit einem Design, das ursprünglich nur für den Desktop gedacht war, einfacher fand, war 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 der Datei desktop.css enthalten sein . In der Zwischenzeit können Sie in der Datei mobile.css von vorne beginnen . Möglicherweise können Sie in diesem mobilen CSS, das auch für Tablets funktioniert, ein schönes einspaltiges Layout erstellen.

Mit diesem Ansatz haben Sie einen Neuanfang und können speziell nur für Handys und Tablets stylen, ohne dass die Desktop-Stile durchkommen und Dinge überschreiben. Sie können Elemente nach Bedarf nur für Mobilgeräte ausblenden / anzeigen / 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 feststellen, dass Sie den HTML-Code sowohl für die responsive als auch für die mobile Version nicht realistisch umgestalten können, können Sie alternativ eine Klasse in den Desktop-Code einfügen, z. B. die Klasse "desktop", und CSS in der mobilen Version verwenden, um ihn auszublenden. Schreiben Sie dann etwas neues HTML für diesen Abschnitt und geben Sie ihm ein class="mobile". Dann Stil es dementsprechend in der mobile.css und versteckt sie in der desktop.css .

Lichtspeeder
quelle
3

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

stephanie
quelle
2

Reaktionsfähigkeit und "korrekt auf Smartphones angezeigt werden" sind völlig unterschiedliche Aufgaben.

  1. Vermutlich bezieht sich Reaktionsfähigkeit darauf, dass nach Möglichkeit zusätzliche Roundtrips zum Server vermieden werden. Fehlerprüfung, Ajax zum Abrufen angeforderter Daten und dynamische DOM-Manipulation sind die Aufgaben, die normalerweise die Reaktionsfähigkeit verbessern. Die Verwendung von JavaScript (oder JavaScript-Framework) ist ein effektiver Weg, dies zu tun. In den letzten Jahren bin ich für diese Implementierungen von JavaScript zu jQuery gewechselt. 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 Stunden Entwicklungszeit.

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

$('#result').removeClass('red').addClass('green');
  1. Es ist verlockend zu versuchen, eine Standardseite für Handys wiederzuverwenden, 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 sind unterschiedliche clientseitige Skripte erforderlich, um die mobilen Funktionen nutzen zu können. Ich bevorzuge es, separate dedizierte HTML-Seiten zu erstellen, anstatt eine Seite, die Logik zur Auswahl des zu verwendenden Stils oder der zu verwendenden Funktionen benötigt.
stephanie perry
quelle
Der Fragesteller erwähnte "Responsive Web Design" ( en.wikipedia.org/wiki/Responsive_web_design ), das sich auf das Entwerfen für verschiedene Bildschirmgrößen und -fähigkeiten bezieht. Obwohl es nicht spezifisch für Telefone ist, war dies ein großer Faktor, um diese Technik in den Vordergrund zu rücken.
Jacob Hume
1

Wir haben für unsere Websites das beliebte CSS-Framework 960.gs verwendet.

Wir wollten es reaktionsschnell machen.

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

Es hat funktioniert, war aber in den meisten Browsern, einschließlich der guten, verzögert. Normalerweise erhalten Sie einen "Flash mit nicht gestalteten Inhalten", der je nach Seitenkomplexität stark variiert.

Obwohl die JS-Lösungen funktionieren, sind sie nicht ideal. CSS 3-Medienabfragen sind nach Möglichkeit die beste Wahl. Am Ende haben wir unsere Website-Vorlagen mit Twitter Bootstrap neu erstellt, was sehr gut zu unseren Anforderungen passte.

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

megasteve4
quelle