BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Display matching media query and browser width/height.

Browse Source 
Display matching media query and browser width/height at the bottom of the viewport.
This commit is contained in:
Alphan Gunayin 2012-07-24 14:12:43 -04:00
parent 7ab682091d
commit 1d5d5b8d04
4 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -69,8 +69,12 @@
</div><!-- container -->
<div id="debug"></div>
<!-- End Document
================================================== -->
<script src="scripts/jquery_min.js" type="text/javascript"></script>
<script src="scripts/skeletonMatchMedia.js" type="text/javascript"></script>
</body>
</html>

3
scripts/jquery_min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

17
scripts/skeletonMatchMedia.js Normal file
View File

@ -0,0 +1,17 @@
$(function(){
// Window load and resize.
$(window).bind('load resize', function() {
if(debug){
if(window.matchMedia("(min-width: 768px) and (max-width: 959px)").matches){
$('#debug').html("Tablet (Portrait)");
} else if(window.matchMedia("(min-width: 480px) and (max-width: 767px)").matches){
$('#debug').html("Mobile (Landscape)");
} else if(window.matchMedia("(max-width: 767px)").matches){
$('#debug').html("Mobile (Portrait)");
} else{
$('#debug').html("Desktop & Tablet (Landscape)");
}
$('#debug').append(" – ("+ $(window).width() + ' x '+ $(window).height() +')px');
}
});
});

12
stylesheets/skeleton.css vendored
View File

@ -240,3 +240,15 @@
width: 0;
height: 0;
}
/* #Debug
================================================== */
#debug{
background: rgba(0, 0, 0, 0.5);
bottom: 0;
color: rgba(255, 255, 255, 1);
height: 20px;
position: fixed !important;
width: 100%;
}