H5横屏开发、vue横屏开发@令狐张豪

有时候正常竖屏开发满足不了我们的需求，需横屏开发

开发思路：把这个body利用css3 transform rotate 旋转90度，js判断竖屏情况下的宽高和横屏下的宽高

示例：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>demo</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
</head>
<style>* {margin: 0;padding: 0;box-sizing: border-box;}html {/*用于 获取 屏幕的可视宽高*/width: 100%;height: 100%;overflow: hidden;}body {/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/position: fixed;left: 0;top: 0;width: 100%;height: 100%;display: flex;}@media screen and (orientation:portrait) {/*竖屏样式*/body {transform-origin: 0 0;transform: rotateZ(90deg) translateY(-100%);}}.box{width: 100%;height: 100px;background: #009F95;}
</style><body><div class="box">内容区</div><script>(function() {function resize() {var body = document.getElementsByTagName('body')[0];var html = document.getElementsByTagName('html')[0];var width = html.clientWidth;var height = html.clientHeight;var max = width > height ? width : height;var min = width > height ? height : width;body.style.width = max + "px";body.style.height = min + "px";}resize();window.addEventListener("resize", resize)})();</script>
</body></html></html></html>

效果图：

注意点：

因为横屏开发我们肯定是按照横屏的设计图尺寸来进行开发的，我们实际上是没有旋转手机而是把整个body进行旋转了90度，让 body 初始 width 和 height 就等于页面可视区域的宽高。如果用户手机开启了屏幕旋转那么用户在转动手机后我们的body宽高就发生了改变，与横屏设计图开发出来的效果肯定不适配了。
解决方案：

如需要就做横竖屏两套UI（既然要求了横屏开发那这种需求应该很少应该只做横屏)。
js监测窗口变化，监测用户是否旋转了屏幕（window.orientation），如开启手机旋转后屏幕旋转了可以增加遮罩提示用户关闭手机旋转后使用，类似于王者新打开活动页有个横屏提示一样

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！

H5横屏开发、vue横屏开发@令狐张豪相关推荐

vue项目使用公共js方法@令狐张豪
我们在做项目中会用到很多js方法,然后有些方法是通用的我们需要进行封装使用在src下创建utils目录并创建utils.js文件 utils.js文件 export default {//判断手机机 ...
vue 生成二维码插件@令狐张豪
安装npm npm install qrcodejs2 --save cnpm install qrcodejs2 --save //推荐使用淘宝镜像在使用的组件里引入qrcodejs2js文件 i ...
解决在小程序/H5上点击输入框键盘弹起后弹框显示不全问题@令狐张豪
要实现的效果图: 解决思路: 先禁止input键盘弹起时,是否自动上推页面: 点击input的时候获取键盘弹起来的高度: 把获取出来的高度赋值到弹框的margin-bottom上: 键盘失焦或弹框关闭 ...
vue中class类名如何拼上循环出来的下标？@令狐张豪
在项目中很多地方我们会用到循环一个div,但是这个类名又不能写死了,今天巩固下class类名上如何拼上循环出来的下标这里就直接上代码,简洁易懂 <div v-for="(item,i ...
H5页面初次加载swiper导航切换按钮可以点击，刷新后就失效不可点击问题@令狐张豪
原因:加载顺序的问题,数据还没有完全加载的时候就已经渲染swiper了解决方案:(在swiper加上这两行代码) observer:true,//修改swiper自己或子元素时,自动初始化swipe ...
axios拦截器 @令狐张豪
下面是一个简易的axios拦截器使用的demo,主要看下代码注释,详细可参考axios官方API axios let app = new Vue({el: "#app",data( ...
传统html中使用vant @令狐张豪
这里说的是传统html哈.传统html,不是vue脚手架,最近接手了一个项目,是前后端不分离的,前端是用html写的vue,没使用脚手架,这时候我们想使用vue的一些UI组件库开始很踩了很多坑,网上 ...
解决小程序底部导航在iphone x及以上机型上安全区域的适配问题@令狐张豪
问题点:小程序底部导航如果写固定的位置在安卓系统上是没有问题的,但是在iPhone X及以上机型有安全区域的机器上就显得有点太靠下了,我们可以写成动态的: 解决思路:判断是Android 还是 iOS ...
前端解决粘贴过来的东西不触发键盘事件@令狐张豪
描述: 在做登录的时候输入正确校验时按钮高亮并可以触发事件,我们正常输入的时候没问题,但是直接粘贴过来的时候input监听不到. 解决: 换成oninput事件 //vue写法 <input t ...

H5横屏开发、vue横屏开发@令狐张豪

示例：

效果图：

注意点：

H5横屏开发、vue横屏开发@令狐张豪相关推荐

最新文章

热门文章