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