网页移动端给页面横屏提示

  大家都知道，我们在做移动端的网页时，设计及实现时，都会以竖屏或者横屏中的一种方式进行设计与实现，所以，为了使用户拥有更佳的体验，我们最好就是给网页加一个横屏或者竖屏提示。这里我们以横屏提示为例进行解析。

首先，先做出横屏提示页面

html:

<div id="orientLayer" class="mod-orient-layer" style="display: none;">
     <div class="mod-orient-layer__content">
	     <i class="icon mod-orient-layer__icon-orient"></i>
	     <div class="mod-orient-layer__desc">请竖屏浏览此页面</div>
     </div>
</div>

css:

	 <style type="text/css">
		 /* 样式放在结尾，防止 base64 图片造成拥塞 */

		 @keyframes rotation {
			 10% {
				 transform: rotate(90deg);
				 -webkit-transform: rotate(90deg)
			 }
			 50% {
				 transform: rotate(0);
				 -webkit-transform: rotate(0)
			 }
			 60% {
				 transform: rotate(0);
				 -webkit-transform: rotate(0)
			 }
			 90% {
				 transform: rotate(90deg);
				 -webkit-transform: rotate(90deg)
			 }
			 100% {
				 transform: rotate(90deg);
				 -webkit-transform: rotate(90deg)
			 }
		 }

		 @-webkit-keyframes rotation {
			 10% {
				 transform: rotate(90deg);
				 -webkit-transform: rotate(90deg)
			 }
			 50% {
				 transform: rotate(0);
				 -webkit-transform: rotate(0)
			 }
			 60% {
				 transform: rotate(0);
				 -webkit-transform: rotate(0)
			 }
			 90% {
				 transform: rotate(90deg);
				 -webkit-transform: rotate(90deg)
			 }
			 100% {
				 transform: rotate(90deg);
				 -webkit-transform: rotate(90deg)
			 }
		 }

		 .mod-orient-layer {
			 display: none;
			 position: fixed;
			 height: 100%;
			 width: 100%;
			 left: 0;
			 top: 0;
			 right: 0;
			 bottom: 0;
			 background: #e0600b;
			 z-index: 9
		 }

		 .mod-orient-layer__content {
			 position: absolute;
			 width: 100%;
			 top: 45%;
			 margin-top: -75px;
			 text-align: center;
			 padding-top: 20px;
		 }

		 .mod-orient-layer__icon-orient {
			 display: inline-block;
			 width: 67px;
			 height: 109px;
			 background-image: url(data:image/png;);
			 transform: rotate(90deg);
			 -webkit-transform: rotate(90deg);
			 -webkit-animation: rotation infinite 1.5s ease-in-out;
			 animation: rotation infinite 1.5s ease-in-out;
			 -webkit-background-size: 67px;
			 background-size: 67px
		 }

		 .mod-orient-layer__desc {
			 margin-top: 20px;
			 font-size: 15px;
			 color: #fff
		 }

	 </style>

进入页面时的初始化代码，放在head中;

<!--手机横屏提示-->
	<script>
			//判断手机横竖屏状态：
			function hengshuping(){
				if(window.orientation==0||window.orientation==-360){
					window.location.reload();//页面刷新
				}
			}
			window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
	</script>

js:

<script>
		 var orientLayer = document.getElementById("orientLayer");
		 //判断横屏竖屏
		 function checkDirect() {
			 if (document.documentElement.clientWidth >= document.documentElement.clientHeight) {
				 return "portrait"; //横屏
			 } else {
				 return  "landscape"; //竖屏
			 }
		 }
		 //显示屏幕方向提示浮层
		 function orientNotice() {
			 var orient = checkDirect();
			 if (orient == "landscape") {
				 orientLayer.style.display = "none";
			 } else {
				 orientLayer.style.display = "block";
			 }
		 }
         //给屏幕添加监听事件
		 function init() {
			 orientNotice();
			 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
				 setTimeout(orientNotice, 200);
			 })
		 }
		 init();
	 </script>

好了，有了这三段代码，我们的横屏提示就已经加完了。同理竖屏提示，只需要将改变一下判断横竖屏的js代码中的判断条件即可。好啦~正值中秋，大家中秋快乐。