stonehippo/breakpoint-example.html

## breakpoint-example.html
<!-- The breakpoint widths below are from a specific client project and probably should be moved to standard 320/460/768 breakpoints in other usage -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style>
      body {color: #333; background-color: #eee; font-family: 'Georgia';}
      .breakpoints > div { display: none; text-indent: 3em;}
      @media screen and (max-width: 653px) {
        .breakpoints .maxw_653 {display: block;}
      }
      @media screen and (max-height: 1024px) {
        .breakpoints .max_1024 {display: block;}
      }
      @media screen and (min-width: 654px) {
        .breakpoints .minw_654 {display: block;}
      }
      @media screen and (min-width: 990px) and (max-device-height: 800px), screen and (min-width: 990px) and (max-device-height: 1024px) and (device-aspect-ratio: 3/4) {
        /* The second part of the above media query selects the iPhone */
        .breakpoints .minw_990_maxh_1024 {display: block;}
        body {background-color: purple;}
      }
      @media screen and (min-width: 990px) and (min-device-height: 801px) and (min-device-aspect-ratio: 1/1) {
        /* This will only be applied on larger desktop screen */
        .breakpoints .minw_990_minh_1025 {display: block;}
        body {background-color: orange;}
      }
      @media screen and (min-width: 990px) {
        .breakpoints .minw_990 {display: block;}
      }

      @media screen and (orientation: landscape) {
        .breakpoints .landscape {display: block;}
      }

      @media (orientation: portrait) {
        .breakpoints .portrait {display: block;}
      }

      #output {margin: 1em; padding: 1em; border-radius: 1em; border: 1px solid #999;}
    </style>
  </head>
  <body>
    <p>This is a testbed for the current breakpoints use in the client site</p>
    <div class="breakpoints">
      <p>Currently active breakpoints:</p>
      <div class="maxw_653">@media screen and (max-width: 653px): all mobile </div>
      <div class="maxh_1024">@media screen and (max-height: 1024px): mobile and tablet </div>
      <div class="minw_654">@media screen and (min-width: 654px): tablet portrait</div>
      <div class="minw_990_maxh_1024">@media screen and (min-width: 990px) and (max-device-height: 800px), screen and (min-width: 990px) and (max-device-height: 1024px) and (device-aspect-ratio: 3/4): tablet landscape</div>
      <div class="minw_990_minh_1025">@media screen and (min-width: 990px) and (min-device-height: 801px) and (min-device-aspect-ratio: 1/1): bigger than tablet</div>
      <div class="minw_990">@media screen and (min-width: 990px): tablet landscape and up</div>
      <div class="landscape">@media screen and (orientation: landscape)</div>
      <div class="portrait">@media screen and (orientation: portrait)</div>
    </div>
    <div id="output">

    </div>
    <script>
      output = document.getElementById('output');

      if (window.orientation != undefined) {
        orient = document.createElement("span");
        orient.id = 'orient';
        orient.innerHTML = "Current orientation: " + window.orientation;
        output.appendChild(orient);
        document.addEventListener('orientationchange', function (e) {
          console.log(window.orientation);
          orient.innerHTML = "Current orientation (in degrees): " + window.orientation;
        }, false);
      } else {
        output.innerHTML = "Device orientation not available on this device"
      }
    </script>
  </body>
</html>
	<!-- The breakpoint widths below are from a specific client project and probably should be moved to standard 320/460/768 breakpoints in other usage -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style>
	body {color: #333; background-color: #eee; font-family: 'Georgia';}
	.breakpoints > div { display: none; text-indent: 3em;}
	@media screen and (max-width: 653px) {
	.breakpoints .maxw_653 {display: block;}
	}
	@media screen and (max-height: 1024px) {
	.breakpoints .max_1024 {display: block;}
	}
	@media screen and (min-width: 654px) {
	.breakpoints .minw_654 {display: block;}
	}
	@media screen and (min-width: 990px) and (max-device-height: 800px), screen and (min-width: 990px) and (max-device-height: 1024px) and (device-aspect-ratio: 3/4) {
	/* The second part of the above media query selects the iPhone */
	.breakpoints .minw_990_maxh_1024 {display: block;}
	body {background-color: purple;}
	}
	@media screen and (min-width: 990px) and (min-device-height: 801px) and (min-device-aspect-ratio: 1/1) {
	/* This will only be applied on larger desktop screen */
	.breakpoints .minw_990_minh_1025 {display: block;}
	body {background-color: orange;}
	}
	@media screen and (min-width: 990px) {
	.breakpoints .minw_990 {display: block;}
	}

	@media screen and (orientation: landscape) {
	.breakpoints .landscape {display: block;}
	}

	@media (orientation: portrait) {
	.breakpoints .portrait {display: block;}
	}

	#output {margin: 1em; padding: 1em; border-radius: 1em; border: 1px solid #999;}
	</style>
	</head>
	<body>
	<p>This is a testbed for the current breakpoints use in the client site</p>
	<div class="breakpoints">
	<p>Currently active breakpoints:</p>
	<div class="maxw_653">@media screen and (max-width: 653px): all mobile </div>
	<div class="maxh_1024">@media screen and (max-height: 1024px): mobile and tablet </div>
	<div class="minw_654">@media screen and (min-width: 654px): tablet portrait</div>
	<div class="minw_990_maxh_1024">@media screen and (min-width: 990px) and (max-device-height: 800px), screen and (min-width: 990px) and (max-device-height: 1024px) and (device-aspect-ratio: 3/4): tablet landscape</div>
	<div class="minw_990_minh_1025">@media screen and (min-width: 990px) and (min-device-height: 801px) and (min-device-aspect-ratio: 1/1): bigger than tablet</div>
	<div class="minw_990">@media screen and (min-width: 990px): tablet landscape and up</div>
	<div class="landscape">@media screen and (orientation: landscape)</div>
	<div class="portrait">@media screen and (orientation: portrait)</div>
	</div>
	<div id="output">

	</div>
	<script>
	output = document.getElementById('output');

	if (window.orientation != undefined) {
	orient = document.createElement("span");
	orient.id = 'orient';
	orient.innerHTML = "Current orientation: " + window.orientation;
	output.appendChild(orient);
	document.addEventListener('orientationchange', function (e) {
	console.log(window.orientation);
	orient.innerHTML = "Current orientation (in degrees): " + window.orientation;
	}, false);
	} else {
	output.innerHTML = "Device orientation not available on this device"
	}
	</script>
	</body>
	</html>