If you want to determine the pixel ratio, you can use -webkit-min-device-pixel-ratio in media queries. For instance, the Galaxy S4 and newer models have a -webkit-device-pixel-ratio of 4, while the S3 has a ratio of 3. Tailoring your design based on this information allows for device-specific mobile experiences.
For targeting just the S3, here's an example:
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
You can refer to a comprehensive list of devices and their corresponding media queries on this CSS Tricks page.
Don't forget to add a META tag in the <head> section for proper scaling:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
Redirecting based on device detection is usually done with JavaScript rather than CSS.
A simple approach involves checking window.screen.width:
if (window.screen.width < 1000) {
window.location = 'm.mysite.com';
}
Alternatively, a more reliable method is to check the user agent:
var isMobile = function() {
console.log("Navigator: " + navigator.userAgent);
return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);
};
Hope this explanation proves helpful! :)