Friday, 31 July 2015

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>

No comments:

Post a Comment