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.
<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.
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
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:
The following are the code snippets you can use to achieve the same results as above
Again, executing code after the page has loaded:
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.