With responsive design being all the rage in the web design community, it comes to no surprise that screen size is taken very seriously. Front-end designers tend to be very touchy about these sorts of things. As such they pride themselves on being pixel perfect in every aspect of their visual presentations.<\/p>\n
<\/p>\n
There are dummy proof tools and code snippets<\/a> out there that make mastering the different screen sizes and orientations trivial to work with. Like with any spoiled child out there things may not always work in the way of the front end designer.<\/p>\n The problem with one such method, for example, the Bootstrap 3 CSS media query method pointed to above<\/a> is that it may not always fit the needs of the developer in all circumstances all of the time. You would need to get a little more drastic with the methods you employ. Enter JavaScript.<\/p>\n JavaScript is this language of the web. It is generally known as a scripting language. JavaScript is a language that is lightweight, dynamic, high-level, untyped and interpreted. It is ideal for turning the norm on the web to something dynamic and unconventional.<\/p>\n Because JavaScript is a dynamic interpreted programming language, and just like any other programming language, there is more than one way to do the same thing. In this tutorial, we will not look at every possible way of doing it but we will just highlight two methods.<\/p>\n The first method will show you how to detect screen size with jQuery. This is an extremely popular rapid development JavaScript library. The second method will show you how to do the same thing using Vanilla JavaScript. Vanilla JavaScript is the core language minus any third party dependencies or libraries.<\/p>\n The first thing you would need to do is add the jQuery JavaScript library to your website unless it is already added.You can do so by linking to the version of your choosing from a Content Delivery Network (CDN) in your The next part is easy. jQuery uses Execute JavaScript Based on Screen Size Using jQuery<\/h2>\n
<head><\/code> tags. We have included two popular CDN sources and picked out the latest version as of the time this article was published. You can keep track of the latest jQuery versions or download the library to your computer here<\/a>.<\/p>\nGoogle CDN:<\/h3>\n
<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.1\/jquery.min.js"><\/script><\/code><\/p>\nMicrosoft CDN:<\/h3>\n
<script src="http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.12.0.min.js"><\/script><\/code><\/p>\n$(window).width()<\/code> to determine the browser width. The following piece of code is what you need to get your work headed in the right direction. Obviously, the rules apply in that the code must be wrapped in\u00a0<script><\/code>\u00a0 tags:<\/p>\n