Responsive deign for single app in mobiles, tabs, desktops
If you like to have your app run in different devices viz. desktop, mobile, tablets without rewriting the app there are various ways to do so. There is nothing like wrong or right, each app has it's own specification and requirement to adopt.
Second option, If you don't want framework, can try with media queries.attaching a sample index,html page, where 3 diff css files, which are called based on the device-pixel-ratio / max-device-width of the device....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html\" charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no\"/>
<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"res/font/css/font-awesome.min.css\"/>
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 2.0)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.5)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.3)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.25)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.0)\" href=\"css/ldpi.css\" />
<link rel=\"stylesheet\" media=\"all and (-webkit-device-pixel-ratio: 1.0)\" href=\"css/ldpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 0.75)\" href=\"css/ldpi.css\" />
<!-- OR YOU CAN USE THE BLOCK BELOW -->
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1), all and (-webkit-min-device-pixel-ratio: 2), all and (min-device-pixel-ratio: 2)\' />
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 1), all and (-o-min-device-pixel-ratio: 1), all and (-webkit-min-device-pixel-ratio: 1), all and (min-device-pixel-ratio: 1)\' />
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 1.3), all and (-o-min-device-pixel-ratio: 1.3), all and (-webkit-min-device-pixel-ratio: 1.3), all and (min-device-pixel-ratio: 1.3)\' />
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 1.25), all and (-o-min-device-pixel-ratio: 1.25), all and (-webkit-min-device-pixel-ratio: 1.25), all and (min-device-pixel-ratio: 1.25)\' />
<link rel=\'stylesheet\' type=\"text/css\" media=\'screen and (min-device-width: 320px) and (max-device-width: 500px)\' href=\'css/ldpi.css\'>
<link rel=\'stylesheet\' href=\'css/mdpi.css\' media=\'all and min-device-width: 501px and max-device-width: 768px\'>
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and min-device-width: 769px and max-device-width: 1024px\'>
</head>
</html>
But the issue with this one, is it loads all the css files though it calls the specific css while rendering the html pages.
Otherwise you can use js to load diff css. check this link:
Best way to do this is,
i) put all the common css in a single css like stles.css
ii) put the diff blocks specific to the device width in diff css files(eg. ldpi.css/mdpi.css/hdpi.css). You can keep the css class names same, unless the same css property is used it won;t be overridden.
iii) Your js function will call the css files based on the device width.
Following are some of the ways, though in mobile platforms like android/iOS different methods can also be adopted.
Twitter bootstrap is a nice framework for doing so
http://www.w3resource.com/
http://www.w3resource.com/
Second option, If you don't want framework, can try with media queries.attaching a sample index,html page, where 3 diff css files, which are called based on the device-pixel-ratio / max-device-width of the device....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html\" charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no\"/>
<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"res/font/css/font-awesome.min.css\"/>
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 2.0)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.5)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.3)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.25)\" href=\"css/hdpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 1.0)\" href=\"css/ldpi.css\" />
<link rel=\"stylesheet\" media=\"all and (-webkit-device-pixel-ratio: 1.0)\" href=\"css/ldpi.css\" />
<link rel=\"stylesheet\" media=\"all and (min-device-pixel-ratio: 0.75)\" href=\"css/ldpi.css\" />
<!-- OR YOU CAN USE THE BLOCK BELOW -->
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1), all and (-webkit-min-device-pixel-ratio: 2), all and (min-device-pixel-ratio: 2)\' />
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 1), all and (-o-min-device-pixel-ratio: 1), all and (-webkit-min-device-pixel-ratio: 1), all and (min-device-pixel-ratio: 1)\' />
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 1.3), all and (-o-min-device-pixel-ratio: 1.3), all and (-webkit-min-device-pixel-ratio: 1.3), all and (min-device-pixel-ratio: 1.3)\' />
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and (-moz-min-device-pixel-ratio: 1.25), all and (-o-min-device-pixel-ratio: 1.25), all and (-webkit-min-device-pixel-ratio: 1.25), all and (min-device-pixel-ratio: 1.25)\' />
<link rel=\'stylesheet\' type=\"text/css\" media=\'screen and (min-device-width: 320px) and (max-device-width: 500px)\' href=\'css/ldpi.css\'>
<link rel=\'stylesheet\' href=\'css/mdpi.css\' media=\'all and min-device-width: 501px and max-device-width: 768px\'>
<link rel=\'stylesheet\' href=\'css/hdpi.css\' media=\'all and min-device-width: 769px and max-device-width: 1024px\'>
</head>
</html>
But the issue with this one, is it loads all the css files though it calls the specific css while rendering the html pages.
Third option is to call the media queris within the css file, specific to the block you want to call. Attaching such a css.
@media (min-width: 320px), (max-width: 499px) {
. {
}
}
@media (min-width: 500px), (max-width: 767px) {
. {
}
}
@media (min-width: 768px), (max-width: 1024px) {
. {
}
}
Best way to do this is,
i) put all the common css in a single css like stles.css
ii) put the diff blocks specific to the device width in diff css files(eg. ldpi.css/mdpi.css/hdpi.css). You can keep the css class names same, unless the same css property is used it won;t be overridden.
iii) Your js function will call the css files based on the device width.
Next post, I will be posting more about webkit-device-pixel-ratio...how the pixels are arranged in mobile devices and how it plays the resolution in your mobile devices.
Comments