Чи добре використовувати jQuery для чуйного веб-дизайну?

11

Мені доручено оновити сайт, щоб він відповідав і відображався правильно на смартфонах. На жаль, із сайтом у його нинішньому вигляді працювати не дуже просто - я не можу просто змінити CSS.

Чи вважається поганим виявлення розміру браузера та внесення змін CSS за допомогою jQuery?

Наприклад:

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

— MeltingDog
джерело

7

Ви повинні замість цього використовувати медіа-запити, оскільки це рекомендований стандарт W3C з червня 2012 року.

— Zistoloen

Ви маєте на увазі змінити стилі? Я думав, що теж, але мені все одно доведеться змінити багато елементів

— MeltingDog

Так. У будь-якому випадку, я думаю, у вас буде багато змін CSS.

— Зістолоен

2

Висловлювання "Мені доручено оновити сайт, щоб зробити його чутливим" не слід дотримуватися "Я не можу просто змінити CSS"

— Франциско Презенсія

4

все потребує більше jQuery ( Відмова: не сприймайте це серйозно )

— Darkhogg

13

Звичайно. Очевидно, що було б краще використовувати CSS окремо, але якщо ви не можете, використовуйте те, що у вас є. Зробіть як можна більше з CSS та використовуйте JS за потребою. Не впевнений, чому ви не можете змінити існуючий CSS, але ви можете додати таблицю стилів за допомогою 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);
})();

Джерело: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

потім перейдіть з CSS / медіа-запитами.

Або з jQuery:

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

Я зробив чуйні "шкури", де деякі речі просто неможливо було обійтися без зміни DOM. Якщо у вас немає доступу до HTML, іноді єдиною відповіддю є маніпуляція JS DOM.

РЕДАКТУВАННЯ:
Залежно від візуальних вимог вашої невеликої версії екрану, ви можете здивуватися тому, наскільки цей фрагмент CSS приведе вас до шляху до "мобільних для мобільних пристроїв".

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

Якщо оригінальний розробник CSS дуже любив !importantі ви не можете дістатись до HTML, ви можете використовувати jQuery / JS, щоб додати ідентифікатор до корпусу або контейнера високого рівня та додати його до свого вибору.

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

— Буде
джерело

З мого досвіду чуйний дизайн може бути зроблений лише за допомогою css. Як тільки ваш дизайн також повинен стати адаптивним, вам, ймовірно, також потрібен Javascript. Майте на увазі, що ви хочете, щоб javascript був мінімально можливим.

— Марко

4

Я б сказав, спершу спробуйте використовувати медіа-запити. Один із способів, який мені було легше мати справу з дизайном, який спочатку був лише для робочого столу, це такий:

Почніть з двох окремих таблиць стилів. Один для нового чуйного дизайну, а другий для старої версії настільного комп’ютера:

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

Всі старі стилі можуть міститися у desktop.css . Тим часом ви можете почати з нуля в mobile.css . Ви можете виявити, що ви можете зробити хороший макет одного стовпця в тому мобільному CSS, який працює і для планшетів.

Цей підхід дозволяє вам почати новий початок, і ви можете створювати стилі спеціально лише для мобільних телефонів і планшетів, а також не мати стилів робочого столу, які проходять через та переважаючі речі. Ви можете приховати / показати / позиціонувати елементи, як це потрібно лише для мобільних пристроїв.

Якщо вам дійсно потрібно змінити код робочого столу, щоб він міг працювати з мобільним та настільним комп’ютером, ви можете змінити розмітку. Крім того, якщо ви виявите, що ви не можете реально переробити HTML як для чуйної, так і для мобільної версій, ви можете поставити клас на робочий код, наприклад, клас "desktop" і використовувати CSS в мобільній версії, щоб приховати його. Потім напишіть якийсь новий HTML для цього розділу та дайте йому class="mobile". Потім відповідно стилізуйте його до mobile.css і захойте його у desktop.css .

— світлодіод
джерело

3

Я працював на сайті, який використовував цей метод, і у мене виникли проблеми з обертанням екрану на мобільних пристроях. Оскільки JavaScript виявить лише один раз при завантаженні сторінки, якщо користувач поверне пристрій, він не розшириться на повну ширину так, як це відбуватиметься за допомогою медіа-запитів. Мені в той час було простіше просто перейти на CSS, але, можливо, експерт JS би знав, чи є спосіб виявити зміну ширини вікна перегляду. Здається, що повинен бути спосіб з AJAX, але я б хотів зробити ставку, що все, що ви знайдете, буде надмірним, наскільки продуктивність іде, як описує Мегастев.

— стефані
джерело

2

Чуйність і "правильно з'являтися на смартфонах" - це зовсім різні завдання.

Імовірно, чуйність стосується усунення, де це можливо, зайвих поїздок до сервера. Перевірка помилок, Ajax для отримання запитуваних даних та динамічна маніпуляція з DOM - це завдання, які зазвичай покращують чуйність. Використання JavaScript (або JavaScript Framework) - це ефективний спосіб зробити це. За останні кілька років я перейшов з JavaScript на jQuery для цих реалізацій. У багатьох випадках jQuery має вбудовану сумісність браузера, яка має очевидні переваги. Плагіни для вибору дати, автоматичного заповнення та меню економлять години розвитку.

Вона не повинна бути основним джерелом стилізації. Це робота CSS. Однак їх можна використовувати разом ефективно. У простому прикладі текст може бути викладений по-різному в залежності від результатів певної дії. jQuery можна використовувати для зміни визначеного CSS класу.

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

Заманливо намагатися повторно використовувати стандартну сторінку для мобільних пристроїв, динамічно змінюючи стиль. Мій досвід полягає в тому, що це забезпечує незадовільне рішення. CSS зовсім інший, і для використання переваг мобільних функцій потрібні різні сценарії на стороні клієнта. Моя перевага - створити окремі виділені HTML сторінки, а не одну сторінку, що вимагає логіки для вибору стилів або функцій, які будуть використовуватися.

— Стефані Перрі
джерело

Запитуючий зазначив "Чуйний веб-дизайн" ( en.wikipedia.org/wiki/Responsive_web_design ), який стосується проектування для різних розмірів екрана та можливостей. Хоча це не характерно для телефонів, це було величезним фактором виведення цієї техніки на перший план.

— Яків Юм

1

Ми звикли використовувати популярний фреймворк css 960.gs для наших сайтів.

Ми хотіли зробити це чуйним.

Хтось зробив плагін, що реагує на JS, на 960 g, тому ми подумали, що сено, чому б просто не використовувати це, оскільки нам не доведеться вносити будь-які зміни в шаблони структурних сайтів.

Вона працювала, але була більш млявою у більшості браузерів, включаючи хороші. Зазвичай ви отримуєте «спалах нестильованого вмісту», який сильно відрізнятиметься залежно від складності сторінки.

Незважаючи на те, що рішення JS працюють, вони не є ідеальними, CSS 3 медіа-запити - найкращий вибір, якщо це можливо. Зрештою, ми просто переробили шаблони нашого сайту, використовуючи Twitter Bootstrap, який дуже добре підходив для наших потреб.

Хоча це може бути апетитним для коротких скорочень, але це часто виявляється більш тривалим / болісним у довгостроковій перспективі.

— megasteve4
джерело