使用CSS3属性aspect-ratio做横屏检测优化用户体验，附demo完整代码

这周龙珠超不更新、今天NBA没雷霆集锦，下班回来略显无聊，原计划看书，但最终还是决定边听歌边写个demo+一篇水文。

demo运行：新建一个html文件，扔进去保存后浏览器打开即可。

竖屏时结果：

横屏时结果：

demo比较简单，直接贴代码好了：

代码中image为base64格式，可改成你的图片路径。

<!--Created by XiaoQiang on 12/03/2018.-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><title>Vertical</title><style>*{padding: 0;margin: 0;}.text{position: absolute;top: 50%;left: 50%;transform: translate(-50%);font-size: 24px;}</style>
</head>
<body>
<div><span class="text">我正常显示啦!!!</span>
</div>
<script>// 可以传入config改变样式,默认images为base64图片格式,可以传入images所在url。function setVertical(config) {let color = config && config.color ? config.color : '#000';let txt = config && config.txt ? config.txt : '为了更好的体验，请使用竖屏浏览';let images = config && config.images ? config.images : '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';let div = document.createElement('div');div.innerHTML = '<style type="text/css">@-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; z-index: 999999;} @media screen and (min-aspect-ratio: 1/1){#orientLayer{display: block;} } .mod-orient-layer{display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: ' + color + '; 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(' + images + '); 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}</style><div id="orientLayer" class="mod-orient-layer"> <div class="mod-orient-layer__content"> <i class="icon mod-orient-layer__icon-orient"></i> <div class="mod-orient-layer__desc">' + txt + '</div> </div></div>';document.getElementsByTagName('body')[0].appendChild(div);}window.onload = function() {setVertical(null);}
</script>
</body>
</html>

水文撰写完毕~听歌准备睡觉~~

使用CSS3属性aspect-ratio做横屏检测优化用户体验，附demo完整代码相关推荐

【yolov3目标检测】(3) opencv+yolov3 检测交通路况，附python完整代码
各位同学好,今天和大家分享一下如何使用 opencv 调用 yolov3 模型,加载网络权重,很方便地实现 yolov3 目标检测.先放张图看效果. 使用的网上找的行车记录仪视频做测试,数据集采用CO ...
【目标检测】(10) Mosaic 数据增强方法，附Python完整代码
各位同学好,今天和大家分享一下目标检测算法中常用的图像数据增强方法 Mosaic.先放张图看效果.将四张图片缩放后裁剪拼接在一起,并调整检测框的坐标位置,处理位于图像边缘的检测框.文末有完整代码 1. ...
用css3属性如何来做一个动态螺旋丸
效果图: 这里用到的css3属性: transform animation transform-style <body><div class="smallbox" ...
【yolov4目标检测】(4) opencv+yolov4-tiny 实现选择性目标检测，附python完整代码
各位同学好,今天和大家分享一下如何使用 opencv 调用 yolov4-tiny 目标检测方法,并对指定类别进行检测.用b站的视频做测试. 点击按钮 'all',按钮变红色,对所有的类别检测点击按 ...
【目标检测】(9) 改进PANet特征提取金字塔，附Tensorflow完整代码
各位同学好,今天和大家分享一下如何使用注意力机制和深度可分离卷积优化 YOLOV4 的 PANet 特征金字塔.看本篇博客之前,建议大家先看以下几篇: YOLOV4主干网络:https://b ...
【机器视觉案例】(11) 眨眼计数器，人脸关键点检测，附python完整代码
各位同学好,今天和大家分享一下如何使用 mediapipe+opencv 实现眨眼计数器.先放张图看效果. 下图左侧为视频图像,右侧为平滑后的人眼开合比曲线.以左眼为例,若眼眶上下边界的距离与左右边界 ...
【目标检测】(8) ASPP改进加强特征提取模块，附Tensorflow完整代码
各位同学好,最近想改进一下YOLOV4的SPP加强特征提取模块,看到很多论文中都使用语义分割中的ASPP模块来改进,今天用Tensorflow复现一下代码. YOLOV4的主干网络代码可见我上一篇文章 ...
【opencv】(13) 案例：停车场空余车位检测，附python完整代码
各位同学好,今天和大家分享一下如何使用Opencv完成停车场的车位检测,及空余车位计数,先放张图看效果. 红框代表该车位有车,绿框代表该车位空余,左上角记录有几个空余车位,黄色数字代表该车位内的像素个 ...
【opencv】(11) 背景建模，帧差法、混合高斯模型，实战：行人检测，附python完整代码和数据集
各位同学好,今天和大家分享一下opencv背景建模相关操作.主要介绍两种背景建模方法,帧差法和混合高斯模型. 案例简介:现有一份路口摄像机拍摄的行人流视频,通过背景建模方法,区分背景和前景,完成行人识 ...

使用CSS3属性aspect-ratio做横屏检测优化用户体验，附demo完整代码

使用CSS3属性aspect-ratio做横屏检测优化用户体验，附demo完整代码相关推荐

最新文章

热门文章