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

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

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

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代码中的判断条件即可。好啦~正值中秋，大家中秋快乐。

网页移动端给页面横屏提示相关推荐

WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供
移动端开发的小伙伴们应该遇到过一个问题:h5页面在微信端打开的时候,滑到最顶部再网上滑就会出现一段黑色的背景,并且显示当前页面url,虽然一般情况下不会有太大的影响,但是如果要自定义显示内容就会影响我 ...
iis缓存html网页,服务端缓存页面及IIS缓存设置
缓存信息基本概念我们在看网页的header信息时,经常看到这几个参数:Expires.Cache-Control.Last-Modified.ETag,它们是RFC 2616(HTTP/1.1)协议 ...
移动端如何强制页面横屏
##背景最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏.这是js实现手机横竖屏事件然而当用 ...
HTML5响应式手机模板：电商网站设计——房地产移动端网页模板(15个页面)
HTML5响应式手机模板:电商网站设计--房地产移动端网页模板(15个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板手机网页模板手机网站模板手机模板响应式手机网站 ...
ps转换html适应网页尺寸,【ps制作网页页面】ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?...
[ps制作网页页面]ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?下面就和小编一起来看看吧! ps图像如何生成html? 事实上,ps有很多功能.你还羡慕 ...
移动端h5页面帮助资料干货
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
移动端网站页面优化的关键点
随着智能手机的普及以及平板等移动端设备的应用越来越广泛,面对更多消费体的移动端设备也有更多的企业正在加快移动网站的建设,从而为企业带来更多的流量和用户.但对于很多移动端网站,人们并没有进行很好的优化, ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
html5 移动端单页面布局
序移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...

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

网页移动端给页面横屏提示相关推荐

最新文章

热门文章