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) {

// 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) {

//for Apple iPad series
@media (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

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

//Function to the css rule
function checkSize(){
    if(window.innerWidth < 768)
var thisObject = $("#docsTable");
var actualWidth = window.innerWidth - 50;

No comments:

Post a Comment