移动端H5页面 横、竖屏
2024-06-30 13:34:11
js没这么高的权限要求系统这么做，一般是检测判断高小于宽的时候提示用户就行了（用户体验比较好）
方式一 参考链接
<!-- android强制竖屏 ios暂时无效 --><meta name="msapplication-tap-highlight" content="no"><!-- uc浏览器强制竖屏 --> <meta name="screen-orientation" content="portrait"><!-- QQ浏览器强制竖屏 --><meta name="x5-orientation" content="portrait">
方式二，横屏时提示用户请竖屏（提高用户体验度）
html
<!--旋转提示--> <!-- 选择禁止横屏或竖屏显示--><div id="orientLayer" class="mod-orient-layer"><div class="mod-orient-layer__content"><i class="icon mod-orient-layer__icon-orient" /><div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div></div></div>
css
/*横竖屏代码*/
/* 样式放在结尾，防止 base64 图片造成拥塞 */
@-webkit-keyframes rotation {10% {transform: rotate(90deg);-webkit-transform: rotate(90deg)}50%, 60% {transform: rotate(0deg);-webkit-transform: rotate(0deg)}90% {transform: rotate(90deg);-webkit-transform: rotate(90deg)}100% {transform: rotate(90deg);-webkit-transform: rotate(90deg)}
}@keyframes rotation {10% {transform: rotate(90deg);-webkit-transform: rotate(90deg)}50%, 60% {transform: rotate(0deg);-webkit-transform: rotate(0deg)}90% {transform: rotate(90deg);-webkit-transform: rotate(90deg)}100% {transform: rotate(90deg);-webkit-transform: rotate(90deg)}
}#orientLayer {display: none;
}@media screen and (min-aspect-ratio: 13/9) {#orientLayer {display: block;}body {width: 100%;height: 100%;}
}.mod-orient-layer {display: none;position: fixed;height: 100%;width: 100%;left: 0;top: 0;right: 0;bottom: 0;background: #000;z-index: 9997
}.mod-orient-layer__content {position: absolute;width: 100%;top: 45%;margin-top: -75px;text-align: center
}.mod-orient-layer__icon-orient {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vbx8fHx8fH5+fn29vby8vL5+fn39/f6+vrx8fH+/v709PTx8fH39/fx8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');display: inline-block;width: 67px;height: 109px;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
}
效果：
vue中判断横竖屏状态
移动端H5页面 横、竖屏相关推荐
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记 移动端的样式问题 「1. 安卓 font-weight:700;以上才被认为是加粗.」 「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
- 移动端H5页面编辑器开发实战--原理结构篇
一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
- 移动端h5页面软键盘弹出后 背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题 <div class="app&q ...
- vue实现移动端H5页面截图
vue实现移动端H5页面截图 1.vue使用html2canvas实现移动端H5页面截图并下载. 2.html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个html2canva ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- h5 默认为移动端页面_html5 移动端H5页面设计尺寸规范
原标题:html5 移动端H5页面设计尺寸规范 当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师 ...
- 【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
最新文章
- 华为交换机屏蔽远程计算机,华为交换机远程telnet配置的小问题
- 多线程的那点儿事（之优先级反转）
- net修复工具_Stimulsoft Ultimate v2020.3.2修复性更新升级！| 附下载
- TokenInsight：BTC新增流量稳定，但泡沫指数已超17年峰值
- TypeError: 'str' object is not callable
- 用c语言ipv6组播,需要适用于iOS 9的IPv6组播C代码
- Redis和Memcached在功能、性能以及内存使用效率上的对比
- python调用dll时路径问题_使用ctypes(python)在带括号的路径中加载dll时出错
- Cubase Elements v11.0.0 WiN 23GB含音色库 中文完整版编曲录音软件
- 架构师接龙 飞信孙朝晖VS.139说客李祎
- 企业数据总线(ESB)和注册服务管理(dubbo)的区别
- 怎样实现将分数进行相加的操作?
- ＩＴ 路，梦里思路长。
- ARMv7和ARMv8架构比较
- 有道翻译 python 翻译
- JAVA学习网址大全
- 组态王图素制作_组态王实例教程入门
- 由于我的BoBo日志需要天气内容，所以在这里留个脚印。
- Xiaojie雷达之路---TI实战笔记---ESM Driver说明
- 微信小程序蓝牙BLE开发——关于进制转换（四）