Skip to content

Instantly share code, notes, and snippets.

@tjanczuk

tjanczuk/orientation.html

Last active December 29, 2015 11:59
Show Gist options
  • Save tjanczuk/7667591 to your computer and use it in GitHub Desktop.
Save tjanczuk/7667591 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
orientation.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<style>
/*
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
*/
body {
background: blue;
}
#content {
position: fixed;
height: 40px;
right: 0px;
left: 0px;
top: 100px;
background: red;
}
/*
@media screen and (min-width: 320px) and (orientation:portrait) {
@-ms-viewport { width: 320px !important; height:device-heigth !important; }
}
@media screen and (min-height: 320px) and (orientation:landscape) {
@-ms-viewport { width:auto !important; height:320px !important; }
}
*/
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
var updateMenuPositionPending = false;
$(function () {
log('initialized');
updateMenuPosition();
$(window).resize(function(e) {
log('orientation change: ' + e.orientation + ', width: ' + window.innerWidth + ', height: ' + window.innerHeight);
if (!updateMenuPositionPending) {
updateMenuPositionPending = true;
setTimeout(updateMenuPosition, 10);
}
});
log('after initialize');
});
function updateMenuPosition() {
log('UPDATING MENU POSITION');
$('#content').css('top', (window.innerHeight - 40) + 'px');
updateMenuPositionPending = false;
}
function log(l) {
$('body').append(l + '<br>');
}
</script>
</head>
<body>
This is body
<div id="content">This is content</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment