Skip to content

Instantly share code, notes, and snippets.

@themorgantown

themorgantown/DetectLandScape.html

Created March 13, 2014 19:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save themorgantown/9534925 to your computer and use it in GitHub Desktop.
Save themorgantown/9534925 to your computer and use it in GitHub Desktop.
Download ZIP
This simple HTML document detects Landscape mode on iPhones and encourages you to get back into portrait.
Raw
DetectLandScape.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta content="width=600" name="viewport">
<style>
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
.switch {display:none;}
}
/* Landscape iPhone 2G-4s */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
.switch {
display:block;
margin:auto;
width:85%;
height:85%;
position:absolute;
background-color: gray;
color:#1515d8;
}
}
/* Landscape iPhone 5 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
.switch {
display:block;
margin:auto;
width:85%;
height:85%;
position:absolute;
background-color: gray;
color:#1515d8;
}
}
/* media queries via http://stephen.io/mediaqueries/ */
</style>
<title></title>
</head>
<body>
<p>test</p><!-- place hype document here -->
<!-- This will be hidden in all cases except Landscape mode on iOS devices -->
<div class="switch">
Please Switch to Portrait Mode
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment