Czy można używać jQuery do responsywnego projektowania stron internetowych?

12

Zlecono mi aktualizację witryny, aby była responsywna i wyświetlała się poprawnie na smartfonach. Niestety, strona w obecnej formie nie jest łatwa w obsłudze - nie mogę po prostu zmienić CSS.

Czy źle jest wykryć rozmiar przeglądarki i wprowadzić zmiany w CSS za pomocą jQuery?

Na przykład:

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

— MeltingDog
źródło

7

Zamiast tego należy rozważyć użycie zapytań o media, ponieważ jest to zalecany standard przez W3C od czerwca 2012 r.

— Zistoloen

Chcesz zmienić arkusze stylów? Też tak myślałem, ale nadal musiałbym zmienić wiele elementów

— MeltingDog

Tak. W każdym razie myślę, że wprowadzisz wiele zmian w CSS.

— Zistoloen,

2

Po zdaniu „Miałem za zadanie zaktualizować witrynę, aby była responsywna”, nie powinna następować „Nie mogę po prostu zmienić CSS”

— Francisco Presencia

4

wszystko potrzebuje więcej jQuery ( Uwaga: nie bierz tego na poważnie )

— Darkhogg

13

Pewnie. Oczywiście lepiej byłoby używać CSS sam, ale jeśli nie możesz, użyj tego, co masz. Rób jak najwięcej z CSS i używaj JS w razie potrzeby. Nie wiesz, dlaczego nie możesz zmienić istniejącego CSS, ale możesz dodać arkusz stylów za pomocą 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);
})();

Źródło: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

następnie zwariuj na punkcie zapytań CSS / mediów.

Lub z jQuery:

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

Zrobiłem responsywne „skórki”, w których niektóre rzeczy po prostu nie były możliwe bez zmiany DOM. Jeśli nie masz dostępu do HTML, manipulacja JS DOM jest czasami jedyną odpowiedzią.

EDYCJA:
W zależności od wymagań wizualnych wersji na małym ekranie możesz być zaskoczony, jak daleko ten fragment CSS poprowadzi cię do „przyjaznego dla urządzeń mobilnych”.

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

Jeśli oryginalny programista CSS bardzo go lubił !importanti nie możesz dostać się do HTML, możesz użyć jQuery / JS, aby dodać identyfikator do ciała lub kontenera wysokiego poziomu i dodać go do selektora.

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

— Wola
źródło

Z mojego doświadczenia wynika, że projektowanie responsywne można wykonać tylko za pomocą css. Jak tylko twój projekt również musi stać się adaptacyjny, prawdopodobnie potrzebujesz także Javascript. Pamiętaj, że chcesz, aby javascript był jak najmniejszy.

— Marco

4

Powiedziałbym, że najpierw spróbuj użyć zapytań o media. Jedną z metod, które uważałem za łatwiejsze w przypadku projektu, który pierwotnie był przeznaczony wyłącznie na komputery stacjonarne, było:

Zacznij od dwóch oddzielnych arkuszy stylów. Jeden dla nowego responsywnego projektu, a drugi dla starej wersji komputerowej:

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

Wszystkie stare style mogą być zawarte w pliku desktop.css . Tymczasem możesz zacząć od zera w mobile.css . Może się okazać, że możesz stworzyć ładny układ pojedynczej kolumny w tym mobilnym CSS, który działa również na tablety.

Takie podejście pozwala zacząć od nowa i stylizować specjalnie na telefony komórkowe i tablety, bez konieczności przesuwania stylów pulpitu i zastępowania. Możesz ukryć / pokazać / ustawić elementy zgodnie z wymaganiami tylko dla urządzeń mobilnych.

Jeśli naprawdę potrzebujesz zmienić kod pulpitu, aby działał z urządzeniami mobilnymi i stacjonarnymi, możesz zmienić znaczniki. Alternatywnie, jeśli okaże się, że nie można realistycznie przefakturować kodu HTML zarówno dla wersji responsywnej, jak i mobilnej, można umieścić klasę w kodzie pulpitu, np. Klasę „desktop” i użyć CSS w wersji mobilnej, aby go ukryć. Następnie napisz trochę nowego HTML dla tej sekcji i daj mu class="mobile". Następnie odpowiednio go styluj w mobile.css i ukryj w desktop.css .

— prędkość światła
źródło

3

Pracowałem nad witryną, która korzystała z tej metody, i miałem problemy z obracaniem ekranu na urządzeniach mobilnych. Ponieważ JavaScript wykryje tylko raz podczas ładowania strony, jeśli użytkownik obróci urządzenie, nie rozszerzy się do pełnej szerokości, tak jak w przypadku zapytań o media. Wtedy łatwiej mi było przejść na CSS, ale być może ekspert JS wiedziałby, czy istnieje sposób na wykrycie zmiany szerokości rzutni. Wydaje się, że z AJAX powinien istnieć sposób, ale chciałbym się założyć, że wszystko, co znalazłeś, byłoby przesadzone, jeśli chodzi o wydajność, jak opisuje megasteve.

— Stephanie
źródło

2

Reagowanie i „wyświetlane poprawnie na smartfonach” to zupełnie inne zadania.

Przypuszczalnie responsywność oznacza wyeliminowanie - tam, gdzie to możliwe - dodatkowych podróży w obie strony na serwer. Sprawdzanie błędów, Ajax do pobierania żądanych danych oraz dynamiczna manipulacja DOM to zadania, które zwykle poprawiają czas reakcji. Zastosowanie JavaScript (lub frameworka JavaScript) jest skutecznym sposobem na to. W ciągu ostatnich kilku lat przeniosłem się z JavaScript do jQuery dla tych implementacji. W wielu przypadkach jQuery ma wbudowaną kompatybilność z przeglądarką, co ma oczywiste zalety. Wtyczki dla datepicker, autouzupełniania i menu oszczędzają godziny programowania.

To nie powinno być głównym źródłem stylizacji. To jest praca CSS. Jednak oba te elementy można efektywnie wykorzystać razem. W prostym przykładzie tekst może być inaczej stylizowany w zależności od wyników niektórych działań. jQuery może być użyty do zmiany zdefiniowanej klasy CSS.

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

Kusząca jest próba ponownego użycia standardowej strony na urządzenia mobilne poprzez dynamiczną zmianę stylu. Z mojego doświadczenia wynika, że zapewnia to niezadowalające rozwiązanie. CSS jest zupełnie inny i do korzystania z funkcji mobilnych wymagane są różne skrypty po stronie klienta. Preferuję tworzenie osobnych dedykowanych stron HTML zamiast jednej strony wymagającej logiki do wyboru stylu lub funkcji, które mają być używane.

— Stephanie Perry
źródło

Pytający wspomniał o „Responsive web design” ( en.wikipedia.org/wiki/Responsive_web_design ), który odnosi się do projektowania dla różnych rozmiarów i możliwości ekranu. Chociaż nie jest to specyficzne dla telefonów, był to ogromny czynnik, który doprowadził tę technikę na pierwszy plan.

— Jacob Hume

1

W naszych witrynach korzystaliśmy z popularnego frameworka css 960.gs.

Chcieliśmy, aby był responsywny.

Ktoś stworzył responsywną wtyczkę opartą na JS dla 960 gs, więc pomyśleliśmy, dlaczego nie skorzystać z niej, ponieważ nie musielibyśmy wprowadzać żadnych zmian w szablonach witryn strukturalnych.

Działało, ale było opóźnione w większości przeglądarek, w tym w tych dobrych. Zazwyczaj pojawia się „błysk nie-stylizowanej zawartości”, który różni się znacznie w zależności od złożoności strony.

Pomimo tego, że działające rozwiązania JS nie są idealne, zapytania o media CSS 3 są najlepszym wyborem, jeśli to możliwe. W końcu po prostu zmieniliśmy szablony witryn za pomocą Twitter Bootstrap, co bardzo dobrze pasowało do naszych potrzeb.

Chociaż skrócenie czasu może być apetyczne, często okazuje się, że na dłuższą metę jest bardziej czasochłonne / bolesne.

— megasteve4
źródło