Mobil Görünümde Class Vermek İstiyorum

Bir Div içerisine mobil'de class eklemesi yapmak istiyorum, bunu nasıl yapabilirim acaba?

Örnek;
Normal: <div class="cookie-bar">İçerik</div>
Mobil: <div class="cookie-bar mobile-cookie">İçerik</div>
Ya da: <div class="mobile-cookie-bar">İçerik</div>

Mobil görünümden kastım inceleme menüsünde CTRL+SHIFT+M ile geçtiğimiz görünüm. http://prntscr.com/pk8r4a

mobile-cookie clasını normal html de ekle. css de @media (min-width:768px) olunca display:none yap. max-width:768 de ise display:block

@media screen and (max-width:768px) {
.mobile-cookie {display:block}
}
@media screen and (min-width:768px) {
.mobile-cookie{display:none;}
}

Yukarıdaki arkadaşın bahsettiği mobil optimizasyon için kullanılan yöntem ancak siz bunu bilip bunun dışında bir şey yapmak istiyorsanız, ufak bir js kod yazdım:

var h = window.innerWidth;
var x = document.getElementsByClassName("cookie-bar");
if(h < 768) {
x[0].classList.add("mobile-cookie");
}
else {
x[0].classList.remove("mobile-cookie");
}

Ekran genişliği fark etmeksizin mobil cihazlarda eklenmesi gerekiyor. @media kullanmayı biliyorum ancak yapmak istediğim işlem için bir genişlik belirleyip uygulamak çözüm değil.

Sizin isteğiniz cookie classının bütün mobil cihazlarda aktif olması degil mi ?

cookie classı tüm cihazlarda aktif, istediğim mobilde özel CSS eklemek için mobil'e class tanımlamak.

Programlama dili olarak php kullanıyorsanız: http://mobiledetect.net/
Jquery ile : https://gist.github.com/kyleweiner/5070007
Javascript ile: http://hgoebl.github.io/mobile-detect.js/
Diğer: http://detectmobilebrowsers.com/

Tümüyle bahsettiğiniz işlemi sağlayabilirsiniz.

"cookie classı tüm cihazlarda aktif, istediğim mobilde özel CSS eklemek için mobil'e class tanımlamak."
Şu mesajınıza istinaden alternatif çözüm olarak kütüphane kullanmadan:

<style>
.cookie-bar {background-color:red;}

@media only screen and (max-width: 500px) {
.mobile-cookie-bar {background-color:blue;}
}
</style>

<div class="cookie-bar mobile-cookie-bar">test</div>

O halde kodu şöyle değiştirelim:

!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*bAndroidb)(?=.*bMobileb)/i,f=/Android/i,g=/(?=.*bAndroidb)(?=.*bSD4930URb)/i,h=/(?=.*bAndroidb)(?=.*b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)b)/i,i=/IEMobile/i,j=/(?=.*bWindowsb)(?=.*bARMb)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*bMobileb)/i,o=/(?=.*bFirefoxb)(?=.*bMobileb)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);

var x = document.getElementsByClassName("cookie-bar");
if(isMobile.any != false) {
x[0].classList.add("mobile-cookie");
}
else {
x[0].classList.remove("mobile-cookie");
}

kodu denedim çalışıyor.