Example to detect screen size using Javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Resize</title>
<script type="text/javascript">
function doOnLoad(){
window.addEventListener(
"resize",
function() {
var orientation;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
if(windowWidth > windowHeight){
orientation = "Landscape";
}else if(windowWidth < windowHeight){
orientation = "Portrait";
}else{
orientation = "Square";
}
document.getElementById("browserinfo").innerHTML
= orientation + " : " + windowWidth + " x " + windowHeight
+ "<br/>Screen Size: " + screen.width + " x " + screen.height;
},
false);
}
</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Resize</h1>
<div id="browserinfo"></div>
</body>
</html>
No comments:
Post a Comment