How to differentiate device in CSS.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */

}

How get Print functionality using jquery.

Please take the div id of which you want to take print  and

pass the div id as a input parameter to the function. 

function printDiv(divID) {

    //Get the HTML of div   

    var divElements = document.getElementById(divID).innerHTML;

    //opening a new window and writing the styles and div content in that before printing

    var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');

    popupWin.document.open();

    popupWin.document.writeln("<html><head>");

    popupWin.document.writeln('<link href="../Content/corecss/bootstrap.min.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/bootstrap-reset.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/tabdrop.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/jquery.gritter.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/style1.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/style-responsive.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/navbar-fixed-top.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/table-responsive.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln("</head><body>");

    popupWin.document.writeln("<table align=\"left\"><tr><td align=\"left\" class=\"panel-heading\">");

    popupWin.document.writeln("<br/>");

    popupWin.document.writeln(divElements + "</body></html>");

    popupWin.print();

    popupWin.close();

}