Responsive Design

Increase of portable device usage requiring dynamic design changes for static site. Currently I have faced some issue with such concept. My requirement was to display a table on a page and make it look dynamic.

Here are some methods that I used to do it.

1) Using pure CSS :

You need to use media queries to make content dynamic. here is my code sample:

// for device Apple iPhone 5 or less, Samsung Galaxy S3 mini or less and Microsoft Lumia phones

@media (max-width: 320px) {

#docsTable{ 

max-width:320px;

}

}

// for device Apple iPhone 6,LG G3,LG Optimus G,Samsung Galaxy Note 2,Samsung Galaxy S3- S5,Samsung Galaxy Nexus

@media (max-width: 480px) {

#docsTable{ 

max-width:480px;

}

}

//for Apple iPad series

@media (max-width: 768px) {

#docsTable{ 

max-width:768px;

}

}

For other device width information  click here. 

But the problem occurs when the device has slightly smaller or larger width. It displays scroll which is not user friendly. Here is a way to handle such thing:

2) using Javascript

In this method we calculate the width by device's width and add width css to control at display time.

<script type="text/javascript">

$(document).ready(function() {

    // run test on initial page load

    checkSize();

    // run test on resize of the window in browser. Also need for screen rotation.

    $(window).resize(checkSize);

});

//Function to the css rule

function checkSize(){

    if(window.innerWidth < 768)

{

var thisObject = $("#docsTable");

var actualWidth = window.innerWidth - 50;

thisObject.css("max-width",actualWidth+"px");

}

});

}

</script>