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.
There are dummy proof tools and code snippets 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.
The problem with one such method, for example, the Bootstrap 3 CSS media query method pointed to above 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.
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.
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.
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.
Execute JavaScript Based on Screen Size Using jQuery
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 <head> 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.
Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Microsoft CDN:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
The next part is easy. jQuery uses $(window).width() 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 <script> tags:
In most cases, you may want to execute the above code when the document has finished loading. You can simply do that by wrapping the code in $(document).ready(function) like so:
The following code uses the $(window).load(function) to defer execution of the code until the entire page is loaded including images, inner frames, video, and all content that the page consists of:
Execute Code Based on Screen Size Using Vanilla JavaScript
The following are the code snippets you can use to achieve the same results as above
Again, executing code after the page has loaded:
There you have it. You can head on to this location to download the JavaScript templates for determining the browser width.
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.