Hey guys,
Today we will have a really quick session. Remember how we talked about different layouts of your website depending on your screen size or the device you accessing the website from?
So what if you also want to apply different functionality for this or that device? Let's say when you access your site from your smart phone you don't want to show images using lightbox plugin, but leave them the way they are and allow users to swipe through all the images?
Well the answer is really simple:
if ($(window).width() / parseFloat($("body").css("font-size")) < 30) {// do your magic here}You might ask, why we are taking window width and divide it by font size? Because we used "em" for all the sizes instead of "px". What is that "30"? That was one of the breakpoints we defined. Everything smaller than 30em would be treated as mobile phone.
If you guys are using pixels -that's fine as well, your formula would look even simpler, $(window).width() < [your required width].
Alright, too easy this time, but hey you never know, might be useful for somebody :-)
Cheers,
Your GPTeam
0 comments:
Post a Comment