Skip to content

Instantly share code, notes, and snippets.

@targetkiller

targetkiller/landscape.html

Created April 12, 2016 02:33
Show Gist options
  • Save targetkiller/2d027b534a91e554efe9030c21acdd97 to your computer and use it in GitHub Desktop.
Save targetkiller/2d027b534a91e554efe9030c21acdd97 to your computer and use it in GitHub Desktop.
Download ZIP
横屏提示
Raw
landscape.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8" />
<title>横屏提示</title>
<style type="text/css">
/* CSS方式检测，跟JS方式二选一 */
/*
@media screen and (orientation:portrait) {
.landscape-wrap {display: none;}
}
@media screen and (orientation:landscape) {
.landscape-wrap {display: block;}
}
*/
/*横屏提示*/
@-webkit-keyframes landscape{
0%{
-webkit-transform:rotate(0);
transform:rotate(0);
}
100%{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
}
@keyframes landscape{
0%{
-webkit-transform:rotate(0);
transform:rotate(0);
}
100%{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
}
.landscape-wrap{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #222;
z-index: 10000;
}
.landscape{
width: 60px;
height: 110px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);}
.landscape .tips-arrow{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA+BAMAAAASS8KQAAAABGdBTUEAALGPC/xhBQAAABhQTFRFAAAA+/v7+/v7+/v7+/v7+/v7+/v7AAAAH+qFDgAAAAh0Uk5TABzbeKhO/gDeJr7qAAABe0lEQVRIx82WTXOCMBCGE0PujlM861A5o1bO1I+cU2m5S+L+/59QmMEpIglZcqB7YiAP+767CSwh/zBomOf7w898BJkfoYn3A5LP45o6n/bnY3VVXhB4KACi7QMIzwD6y5X9BjjJJw8fABc39tqThwmIXNgdRD0O6Q6US96Nycxg7oWJtbz2EYFtwRU+bSyPrcbSUlqfWncDFdpmOLG7YrA2i94M19MkvNDDW1gok6ZseBswg7NUuWzAQvW/U7rAvFdfenc7N32puVviemHi6KU39YtEGieuMINuR2fa/Ssl1kM3LNFNxAHxfaSdki0UQURxe1adYeBAj1bdbc0MpbrS3S5vusLBgWqXT+Lgtk2mCTJaBV7esfDyr1lphoWrZtFGeSyxMC3zpl28RA8O9c//tfBuxa5HjqbIHGuZVpMD3MYOSqyCV2NhUgDI0TCNwWPCC7QHTLZTD6hvcw9YJD6w9IBjH9k+7aalB8y9YD0VzLxgNRU8/eEaEb+Q/kR4hE1SOAAAAABJRU5ErkJggg==");
width: 60px;
height: 31px;
background-size: 60px 31px!important;
margin: 0 auto;
}
.landscape .tips-phone{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAACSBAMAAAAUZpE9AAAABGdBTUEAALGPC/xhBQAAABtQTFRF/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8+/v7/Pz8AAAAqNbwjwAAAAl0Uk5TmbvhGcR4Pv4ACRSZBAAAAVlJREFUWMPtmE9PgzAYhxs9bNctMfPMEtl5JspR/QYuUbgrjOP4s3VHNmC+H9s2wEJZ+4LGi8n7S4CkPO2PEi48DEReuSlRKO8zcXzy+HmizZTHYQWV/M4BQ0p7W0HuFswpuSehk7yY4+4kVGALiaVSCa3nKJTboYBmaJvouxWQ7eDQ4wJYHrcGPjTQMQF2SlsPGQFYthXb7ScodiqU3wD4wbsfOAikzX+H/DckXg25HEnSQE/MmKszhHwHxzM0HgJ5fwZRHdVRHdVRHdVRHdVRHdVRHdVRHdWp0PW9McvkJz/LKwvJ/Pd/+c4AaMT5uA/KIieL+qAvsYz6cjXQVByHRQ+0kad9D7TXQooQ0q0khVBHLc3k3EVXLXUkldzdyLuQVGtlXpbCYXOpuwplDFadN16Js0EKbpDMQ7XgQ6MFpWDU+8XJC09rwYiqSq9RlWKfgT61kmMwIN92hjImJC1B5QAAAABJRU5ErkJggg==");
width: 36px;
height: 73px;
background-size: 36px 73px!important;
margin: 0 auto;
-webkit-animation:landscape .6s 0s ease-in-out infinite alternate;
animation:landscape .6s 0s ease-in-out infinite alternate;
}
</style>
</head>
<body>
<!-- 横屏提示页 -->
<div class="landscape-wrap">
<div class="landscape">
<div class="tips-arrow"></div>
<div class="tips-phone"></div>
</div>
</div>
<script type="text/javascript">
/* JS方式检测，跟CSS方式二选一 */
// 横屏监听
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验，请将手机/平板竖过来！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment