jQuery Responsive: Detecting Mobile Screen’s Width and Height

jQuery is an elegant framework for native Javascript. You can use to improve your website’s UI in a particular window breakpoints, specifically this covers browser’s window width and height by acquiring it using width() and height() functions.

Here is a simple tool that you can use for your Responsive Web Design (RWD) projects.

function responsiveFn() {
     width = $( window ).width();
     height = $( window ).height();
      
  // Executing Both width() and height()   
  document.getElementById('widthID').innerHTML=width; 
  document.getElementById('heightID').innerHTML=height; 

  // Do a custom code here
    if(width <= 480){
   document.getElementById('widthID').innerHTML+=" -> This is an Iphone Screen Size"; 
 
    }
 }

  // load() event and resize() event are combined 
$(window).ready(responsiveFn).resize(responsiveFn); 

You can see the actual demo here. But basically you can see the embedded iframe below to have a quick look if how does it look like. However, you can determine exactly the action takes place in heigh value since the iframe has a fixed size.

I combined it with the Native Javascript so you can replace it with your own custom code and showing that they are both flawlessly working.

Enjoy.

Elvin is one of the contributors of mylabplus.com. He has been creating Wordpress Plugins, Magento Extensions, & Mobile Applications. If you find this article useful, please Follow him on .
About Elvin D.

4 thoughts on “jQuery Responsive: Detecting Mobile Screen’s Width and Height”

  1. This works. Thank you.
    How can I transform the value into a PHP variable to be used to do different things depending on window width?

    1. Sorry been in active for a few days, integrating it to php is just same as JS with PHP method like
      function responsiveFn() {
      width = $( window ).width();


Leave Your Thought