Last active
December 18, 2015 13:38
-
-
Save steinbring/5790954 to your computer and use it in GitHub Desktop.
*Detect dimensions of the client device within JavaScript* So, you want to do something based upon the device type and you can't use CSS-based conditions or the client's user-agent string? You could always use the dimensions of the browser window. Source of screen dimension info: http://www.metaltoad.com/blog/simple-device-diagram-responsive-des…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>What type of device am I using?</title> | |
</head> | |
<body> | |
<!-- Show the window width --> | |
<div id="WinWidth"></div> | |
<!-- Show the window height --> | |
<div id="WinHeight"></div> | |
<!-- Show the device type --> | |
<div id="DeviceType"></div> | |
<!-- Load jQuery from the CDN --> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
<script> | |
$('#WinWidth').append('Window Width: ' + $(window).width()); | |
$('#WinHeight').append('Window Height: ' + $(window).height()); | |
// What type of device is this? (let's just look at the width) | |
if($(window).width() == 240){ | |
// It's an older or cheaper android phone in portrait mode | |
$('#DeviceType').append("It's an older or cheaper android phone in portrait mode"); | |
}else if($(window).width() == 320){ | |
// It's an older or cheaper android phone in landscape mode or an iPhone 3/3g/4/4g in portrait mode | |
$('#DeviceType').append("It's an older or cheaper android phone in landscape mode or an iPhone 3/3g/4/4g in portrait mode"); | |
}else if($(window).width() == 480){ | |
// It's a mainstream (HTC, LG, Samsung, Older Droid) Android phone in portrait mode or an iPhone 3/3g/4/4g in landscape mode | |
$('#DeviceType').append("It's a mainstream (HTC, LG, Samsung, Older Droid) Android phone in portrait mode or an iPhone 3/3g/4/4g in landscape mode"); | |
}else if($(window).width() == 540){ | |
// It's a new droid or new HTC in portrait mode | |
$('#DeviceType').append("It's a new droid or new HTC in portrait mode"); | |
}else if($(window).width() == 600){ | |
// It's a Kindle Fire in portrait mode | |
$('#DeviceType').append("It's a Kindle Fire in portrait mode"); | |
}else if($(window).width() == 768){ | |
// It's a iPad or iPad 2 in portrait mode | |
$('#DeviceType').append("It's a iPad or iPad 2 in portrait mode"); | |
}else if($(window).width() == 800){ | |
// It's a mainstream (HTC, LG, Samsung, Older Droid) Android phone in landscape mode or a Samsung Galaxy or newer android tablet in portrait mode | |
$('#DeviceType').append("It's a mainstream (HTC, LG, Samsung, Older Droid) Android phone in landscape mode or a Samsung Galaxy or newer android tablet in portrait mode"); | |
}else if($(window).width() == 960){ | |
// It's a newer droid or newer HTC in landscape mode | |
$('#DeviceType').append("It's a newer droid or newer HTC in landscape mode"); | |
}else if($(window).width() == 1024){ | |
// It's an iPad or Kindle Fire in landscape mode | |
$('#DeviceType').append("It's an iPad or Kindle Fire in landscape mode"); | |
}else if($(window).width() == 1280){ | |
// It's a Samsung Galaxy or newer Android tablet in landscape mode | |
$('#DeviceType').append("It's a Samsung Galaxy or newer Android tablet in landscape mode"); | |
// Failing all else, fall back to wild generalizations | |
}else if($(window).width() < 520){ | |
// It's a smartphone | |
$('#DeviceType').append('You appear to be using a smartphone'); | |
}else if($(window).width() > 519 && $(window).width() < 960){ | |
// It's a tablet | |
$('#DeviceType').append('You appear to be using a tablet'); | |
}else if($(window).width() > 959){ | |
// It's a desktop | |
$('#DeviceType').append('You appear to be using a desktop'); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment