Duyarlı web tasarımı için jQuery kullanmak uygun mudur?

12

Bir siteyi duyarlı hale getirmek ve akıllı telefonlarda doğru bir şekilde görünmesini sağlamak için görevlendirildim. Ne yazık ki, mevcut haliyle site ile çalışmak çok kolay değil - sadece CSS değiştiremiyorum.

Tarayıcı boyutunu saptamak ve jQuery ile CSS değişiklikleri yapmak kötü mü sayılıyor?

Örneğin:

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

— MeltingDog
kaynak

7

Bunun yerine Medya sorgularını Haziran 2012'den bu yana W3C tarafından önerilen bir standart olduğu için kullanmayı düşünmelisiniz .

— Zistoloen

Stil sayfalarını mı değiştirmek istiyorsun? Ben de öyle düşündüm, ama yine de birçok unsuru değiştirmek zorunda kalacağım

— MeltingDog

Evet. Her durumda, çok fazla CSS değişikliğiniz olacağını düşünüyorum.

— Zistoloen

2

"Bir siteyi duyarlı hale getirmek için güncelleme yapmakla görevlendirildim" cümlesini "Sadece CSS'yi değiştiremiyorum"

— izlememelidir

4

her şey daha fazla jQuery gerekiyor ( Feragat: ciddiye almayın )

— Darkhogg

13

Elbette. Açıkçası, sadece CSS kullanmak daha iyi olurdu, ancak yapamıyorsanız, sahip olduklarınızı kullanın. CSS ile mümkün olduğunca çok şey yapın ve gerektiği kadar JS kullanın. Mevcut CSS'yi neden değiştiremediğinizden emin değilsiniz, ancak JS ile bir stil sayfası ekleyebilirsiniz.

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

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

sonra CSS / medya sorguları ile çıldırmak.

Veya jQuery ile:

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

Bazı şeyleri DOM değiştirmeden yapmanın mümkün olmadığı, duyarlı 'kaplamalar' yaptım. HTML'ye erişiminiz yoksa, bazen tek yanıt JS DOM manipülasyonudur.

DÜZENLEME:
Küçük ekran sürümünüzün görsel gereksinimlerine bağlı olarak, bu CSS snippet'inin 'mobil uyumlu' yol boyunca size ne kadar ulaşacağına şaşırabilirsiniz.

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

Orijinal CSS geliştiricisi fazlasıyla düşkündüyse !importantve HTML'ye erişemiyorsanız, gövdeye veya üst düzey konteynere bir kimlik eklemek ve bunu seçicinize eklemek için jQuery / JS kullanabilirsiniz.

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

— Niyet
kaynak

Deneyimlerime göre duyarlı tasarım sadece css ile yapılabilir. Tasarımınızın da uyarlanabilir olması gerektiğinde, muhtemelen bazı Javascriptlere de ihtiyacınız vardır. Javascript'i olabildiğince az tutmak istediğinizi unutmayın.

— Marco

4

Önce medya sorgularını kullanmayı deneyin. Başlangıçta sadece masaüstü için olan bir tasarımla uğraşırken daha kolay bulduğum yöntemlerden biri şuydu:

İki ayrı stil sayfasıyla başlayın. Biri yeni duyarlı tasarım için, diğeri eski masaüstü sürümü için:

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

Tüm eski stiller desktop.css dosyasında bulunabilir . Bu arada mobile.css dosyasında sıfırdan başlayabilirsiniz . Tabletler için de çalışan mobil CSS'de güzel bir tek sütun düzeni yapabileceğinizi görebilirsiniz.

Bu yaklaşım, yeni bir başlangıç yapmanızı sağlar ve sadece cep telefonları ve tabletler için özel olarak stil oluşturabilir ve masaüstü stillerinin içeri girip geçersiz kılmalarını sağlayamazsınız. Yalnızca mobil cihazlar için gereken öğeleri gizleyebilir / gösterebilir / konumlandırabilirsiniz.

Mobil ve masaüstü ile çalışmasını sağlamak için masaüstü kodunu gerçekten değiştirmeniz gerekiyorsa, işaretlemeyi yeniden düzenleyebilirsiniz. Alternatif olarak, hem duyarlı hem de mobil sürümler için HTML'yi gerçekçi bir şekilde yeniden düzenleyemezseniz, masaüstü koduna bir sınıf koyabilirsiniz, örneğin "masaüstü" sınıfı ve gizlemek için mobil sürümde CSS kullanabilirsiniz. Sonra bu bölüm için yeni bir HTML yazın ve a class="mobile". Ardından, mobile.css dosyasında buna göre biçimlendirin ve desktop.css dosyasında gizleyin .

— lightspeeder
kaynak

3

Bu yöntemi kullanan bir sitede çalıştım ve mobil cihazlarda ekran döndürmeyle ilgili sorunlar yaşadım. JavaScript sayfa yüklemesinde yalnızca bir kez algılayacağından, kullanıcı cihazı döndürürse medya sorgularında olduğu gibi tam genişliğe genişlemez. O zamanlar sadece CSS'ye geçmek benim için daha kolaydı, ancak belki de bir JS uzmanı, görüntü genişliği genişliğinde bir değişiklik tespit etmenin bir yolu olup olmadığını biliyordu. AJAX ile bir yol olmalı gibi görünüyor ama ben megasteve açıkladığı gibi performans giderken bulduğunuz bir şey aşırıya kaçmış olacağını bahis istekli olurdu.

— stephanie
kaynak

2

Duyarlılık ve "akıllı telefonlarda doğru görünüyor" tamamen farklı görevlerdir.

Muhtemelen, yanıt verebilirlik - mümkünse - sunucuya ekstra gidiş-dönüşlerin ortadan kaldırılması anlamına gelir. Hata kontrolü, istenen verileri almak için Ajax ve dinamik DOM manipülasyonu, genellikle duyarlılığı artıran görevlerdir. JavaScript (veya JavaScript çerçevesi) kullanımı bunu yapmanın etkili bir yoludur. Son birkaç yıldır bu uygulamalar için JavaScript'ten jQuery'ye geçtim. Çoğu durumda jQuery, bariz avantajlara sahip yerleşik tarayıcı uyumluluğuna sahiptir. Datepicker, autocomplete ve menüler için eklentiler saatlerce geliştirme sağlar.

Ana şekillendirme kaynağı olmamalıdır. Bu CSS'nin işi. Ancak, ikisi birlikte etkin bir şekilde kullanılabilir. Basit bir örnekte, bazı eylemlerin sonuçlarına bağlı olarak metin farklı şekillerde şekillendirilebilir. jQuery, CSS tanımlı sınıfı değiştirmek için kullanılabilir.

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

Stili dinamik olarak değiştirerek mobil cihazlar için standart bir sayfayı yeniden kullanmaya çalışmak cazip gelebilir. Deneyimlerim, tatmin edici olmayan bir çözüm sağlaması. CSS tamamen farklıdır ve mobil özelliklerden yararlanmak için farklı istemci tarafı komut dosyaları gerekir. Benim tercihim, kullanılacak stili veya işlevleri seçmek için mantık gerektiren bir sayfa yerine ayrı ayrı HTML sayfaları oluşturmaktır.

— stephanie perry
kaynak

Sorgulayan , farklı ekran boyutları ve özellikleri için tasarım anlamına gelen "Duyarlı web tasarımı" ( en.wikipedia.org/wiki/Responsive_web_design ) 'den bahsetti. Telefonlara özgü olmasa da, bu tekniği ön plana çıkarmada büyük bir faktördü.

— Jacob Hume

1

Sitelerimiz için popüler 960.gs css çerçevesini kullanıyorduk .

Duyarlı hale getirmek istedik.

Birisi 960 gs için JS tabanlı duyarlı bir eklenti yapmıştı, bu yüzden saman neden sadece yapısal site şablonlarında herhangi bir değişiklik yapmak zorunda kalmayacağımızı düşündük.

Çalıştı ama iyi olanlar da dahil olmak üzere çoğu tarayıcıda laggy oldu. Genellikle, sayfa karmaşıklığına bağlı olarak büyük ölçüde değişiklik gösterecek bir 'stilsiz içerik flaşı' alırsınız.

Çalışan JS çözümlerine rağmen ideal değiller, mümkünse CSS 3 medya sorguları en iyi seçimdir. Sonunda sadece ihtiyaçlarımız için çok uygun olan Twitter Bootstrap kullanarak site şablonlarımızı yeniden yaptık .

Kısa kesimler yapmak cazip gelse de, uzun vadede genellikle daha fazla zaman alıcı / acı verici olur.

— megasteve4
kaynak