È corretto utilizzare jQuery per un web design reattivo?

11

Mi è stato assegnato il compito di aggiornare un sito per renderlo reattivo e apparire correttamente sugli smartphone. Sfortunatamente, il sito nella sua forma attuale non è molto facile da lavorare - non posso semplicemente cambiare il CSS.

È considerato male rilevare la dimensione del browser e apportare le modifiche CSS con jQuery?

Per esempio:

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

— MeltingDog
fonte

7

Dovresti considerare invece di utilizzare le query multimediali perché è uno standard raccomandato dal W3C da giugno 2012.

— Zistoloen

Intendi cambiare fogli di stile? Lo pensavo anch'io, ma avrei comunque dovuto modificare molti elementi

— MeltingDog

Sì. In ogni caso, penso che avrai molte modifiche CSS.

— Zistoloen,

2

La frase "Mi è stato assegnato il compito di aggiornare un sito per renderlo reattivo" non dovrebbe essere seguita da "Non posso semplicemente cambiare il CSS"

— Francisco Presencia

4

tutto ha bisogno di più jQuery ( Disclaimer: non prenderlo sul serio )

— Darkhogg

13

Sicuro. Ovviamente, sarebbe meglio usare solo CSS ma se non puoi, usa quello che hai. Fai il più possibile con i CSS e usa JS secondo necessità. Non sono sicuro del motivo per cui non è possibile modificare il CSS esistente ma è possibile aggiungere un foglio di stile con JS.

(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);
})();

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

quindi impazzisci con le query CSS / media.

O con jQuery:

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

Ho fatto "skin" reattive in cui alcune cose non erano possibili senza cambiare il DOM. Se non si ha accesso all'HTML, la manipolazione del DOM JS è talvolta l'unica risposta.

EDIT: a
seconda dei requisiti visivi della versione del tuo piccolo schermo, potresti essere sorpreso di quanto questo frammento CSS ti porterà verso il "mobile friendly".

/* 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; 
}

Se lo sviluppatore CSS originale era troppo affezionato !importante non riesci ad accedere all'HTML puoi usare jQuery / JS per aggiungere un ID al corpo o al contenitore di alto livello e aggiungerlo al tuo selettore.

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

— Volere
fonte

Dalla mia esperienza, il design reattivo può essere fatto solo con CSS. Non appena il tuo design deve diventare adattivo, probabilmente avrai bisogno anche di Javascript. Tieni presente che desideri mantenere il javascript il più minimo possibile.

— Marco

4

Direi prima di provare a utilizzare le query multimediali. Un metodo che ho trovato più facile quando ho avuto a che fare con un design che era originariamente solo per desktop era questo:

Inizia con due fogli di stile separati. Uno per il nuovo design reattivo e l'altro per la vecchia versione desktop:

<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">

Tutti i vecchi stili possono essere contenuti in desktop.css . Nel frattempo puoi iniziare da zero in mobile.css . Potresti scoprire che puoi creare un bel layout a colonna singola in quel CSS mobile che funziona anche per i tablet.

Questo approccio ti consente di ricominciare da capo e puoi applicare uno stile specifico solo per i cellulari e i tablet e non avere gli stili desktop che arrivano e sovrascrivono le cose. Puoi nascondere / mostrare / posizionare gli elementi come richiesto solo per i dispositivi mobili.

Se hai davvero bisogno di modificare il codice desktop per farlo funzionare con dispositivi mobili e desktop, puoi eseguire il refactoring del markup. In alternativa, se scopri che non puoi realisticamente riformattare l'HTML sia per le versioni responsive che per quelle mobili, puoi inserire una classe sul codice desktop, ad esempio la classe "desktop" e utilizzare i CSS nella versione mobile per nasconderlo. Quindi scrivi del nuovo HTML per quella sezione e dagli un class="mobile". Quindi lo stile di conseguenza in mobile.css e nasconderlo in desktop.css .

— lightspeeder
fonte

3

Ho lavorato su un sito che utilizzava questo metodo e ho avuto problemi con la rotazione dello schermo sui dispositivi mobili. Poiché JavaScript rileverà una sola volta al caricamento della pagina, se l'utente ruota il dispositivo non si espanderà alla massima larghezza come farà con le query multimediali. Per me era più semplice al momento passare al CSS, ma forse un esperto di JS avrebbe saputo se c'è un modo per rilevare un cambiamento nella larghezza della finestra. Sembra che ci dovrebbe essere un modo con AJAX, ma sarei disposto a scommettere che qualsiasi cosa tu abbia trovato sarebbe eccessiva per quanto riguarda le prestazioni, come descrive Megasteve.

— Stefania
fonte

2

Reattività e "apparire correttamente su smartphone" sono compiti completamente diversi.

Presumibilmente, la reattività si riferisce all'eliminazione, ove possibile, di ulteriori round trip sul server. Controllo degli errori, Ajax per recuperare i dati richiesti e manipolazione dinamica del DOM sono le attività che generalmente migliorano la reattività. L'uso di JavaScript (o framework JavaScript) è un modo efficace per farlo. Negli ultimi anni sono passato da JavaScript a jQuery per queste implementazioni. In molti casi jQuery ha una compatibilità browser integrata che presenta ovvi vantaggi. I plugin per datepicker, completamento automatico e menu consentono di risparmiare ore di sviluppo.

Non dovrebbe essere la principale fonte di stile. Questo è il lavoro dei CSS. Tuttavia, i due possono essere usati insieme in modo efficace. In un semplice esempio, il testo può avere uno stile diverso a seconda dei risultati di alcune azioni. jQuery può essere utilizzato per modificare la classe definita CSS.

$('#result').removeClass('red').addClass('green');

È allettante provare a riutilizzare una pagina standard per dispositivi mobili modificando in modo dinamico lo stile. La mia esperienza è che fornisce una soluzione insoddisfacente. Il CSS è completamente diverso e per sfruttare le funzionalità mobili sono necessari diversi script lato client. La mia preferenza è quella di creare pagine HTML dedicate separate piuttosto che una pagina che richieda la logica per selezionare lo stile o le funzioni da utilizzare.

— stephanie perry
fonte

L'interrogatore ha menzionato "Responsive web design" ( en.wikipedia.org/wiki/Responsive_web_design ), che si riferisce alla progettazione di schermi di dimensioni e capacità diverse. Sebbene non sia specifico per i telefoni, questo è stato un fattore enorme nel portare questa tecnica in primo piano.

— Jacob Hume,

1

Usavamo il popolare framework css 960.gs per i nostri siti.

Volevamo renderlo reattivo.

Qualcuno aveva creato un plug-in reattivo basato su JS per i 960 gs, quindi abbiamo pensato a perché non usarlo perché non avremmo dovuto apportare modifiche ai modelli del sito strutturale.

Funzionava ma era in ritardo nella maggior parte dei browser, inclusi quelli buoni. Generalmente si otterrebbe un "bagliore di contenuti non stilizzati" che varia notevolmente a seconda della complessità della pagina.

Nonostante le soluzioni JS funzionino non sono ideali, le query multimediali CSS 3 sono la scelta migliore se possibile. Alla fine abbiamo appena rifatto i nostri modelli di siti utilizzando Twitter Bootstrap che si adattava perfettamente alle nostre esigenze.

Anche se potrebbe essere attraente prendere scorciatoie, spesso risulta essere più dispendioso in termini di tempo / dolore nel lungo periodo.

— megasteve4
fonte