Vue.js_移动端屏幕横屏的展示

最新推荐文章于 2024-08-07 10:06:00 发布
最新推荐文章于 2024-08-07 10:06:00 发布
阅读量1.3w 收藏 10
点赞数 2
分类专栏： Vue.js移动端 文章标签： vue APP   移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xm_w_xm/article/details/84673040
版权

http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.lockOrientation

一、这次开发中我们就用到了打开APP就要横屏的展示出来，上面的链接中就有一个方法 ，只要在进入的时候

设置一下这个就可以

  mounted() {
            plus.screen.lockOrientation( 'landscape-primary');
}

 在页面初始化的时候将这句话写进去后，会发现在电脑端页面不出来，而且会报错plus找不到的错误，我们要将app打包然后放到Hbuider 下真机运行就可以了

侧耳倾听...
关注
专栏目录
vue 移动端 横屏提示 页面 组件开发
qq_45915537的博客
12-08 1378
vue 移动端 横屏提示 页面 组件开发 在移动端开发的时候，可能会出现只在横屏状态下展示的情况，如图： 下面将对此页面抽离成为一个公共组件： 1.建立orient-layer.vue文件 <template> <!--竖屏浏览提示--> <div id="orientLayer" class="mod-orient-layer"> <div class="mod-orient-layer_content"> <div cla
vue移动端强制横屏展示
hl_Abel的博客
04-22 2925
一、在 index.html 中加入计算 font-size 代码 window.calcFontSize = () => { document.documentElement.style.fontSize = Math.min( document.documentElement.clientWidth, document.documentElement.clientHeight
Vue手机端页面横屏效果
nineteenthdog的博客
01-18 3456
转载于https://www.cnblogs.com/dreambin/p/8884835.html 在mounted生命周期中调用方法 resizeScreen() { const _this = this; // 利用 CSS3 旋转 对根容器逆时针旋转 90 度 const detectOrient = function() { let width = document.documentElement.clientWidth, .
移动端横屏展示&横屏展示的BUG
最新发布
qq_62566850的博客
08-07 184
使用el-dialog横屏展示需要添加 fullscreen 是否全屏，要不然在有的手机上面只有半屏。// 横屏展示的Bug。// 解决Bug的效果。
Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现
仙魁XAN
04-10 1万+
Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现 目录 Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、实现步骤 六、关键代码 七、其他 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue Cli Html 移动端的强制横屏功能简单实现，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。 实现竖屏横显示，关键用到了css
移动端如何强制页面横屏展示
van的博客
05-10 4902
简书上stois的一篇文章，强制页面横屏
Vue聊天移动端手机横向
weixin_43704691的博客
03-09 407
实现移动端横向样式兼容 ... mounted(){ //进入页面及是横屏状态 if(window.orientation===90||window.orientation===-90){ //横向了 } //注册监听横向事件 let that = this; window.addEventListener('orientationchange',that.changeH,false); }, destroyed(){ //离开页面取消横向监听 //挂在在window上的事件监听，在注销的时候，要保证是同一
Cordova vue videojs 横屏播放注意按事项
weixin_45410246的博客
07-06 876
添加插件 cordova-plugin-screen-orientation 监听videojs全屏事件
移动端如何让页面强制横屏
热门推荐
u010934423的博客
12-21 2万+
最近想 做一个 手机游戏 页面，所以就 先攻克 手机横屏的 难关。需求1. 在竖屏 条件 下默认是 横屏显示的。2. 即使用户 开了 横屏模式，界面的 横屏模式 自动转换 过来。实现1.html 结构 这里就 简单 放一个文字，作为测试 的元素 <body> Loading </body>2.meta 标签 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html
移动端网页版强制横屏实例
08-23
如果我们希望用户始终处于横屏模式，可以使用JavaScript在页面加载时检查当前屏幕方向，如果在竖屏模式，就提示用户切换到横屏。这可以通过修改`body`的`transform`属性实现，强制页面旋转： ```javascript ...
关于移动端页面强制竖屏的方法
09-22
有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦了。这篇文章主要介绍了关于移动端页面强制竖屏的方法，感兴趣的小伙伴们可以参考一下
vue-fullscreen:一个简单的全屏 Vue.js 组件
07-24
，一个简单的Vue.js组件全屏基于 快速示例 在不退出全屏的情况下导航到新页面 中文文档 支持 支持的浏览器 注意：为了在 Internet Explorer 中使用这个包，你需要一个 Promise polyfill。 注意：桌面和 iPad 支持...
Vue用vant组件写移动端时，实现横屏弹出遮罩层提示用户切换竖屏
m0_46550764的博客
11-22 2502
今天做的项目移动端只配了竖屏的，横屏就很乱，无奈之下，想看看有没有禁止横屏的方法。搜索之后，还是选择了遮罩层提示用户切换回竖屏。 解决： 1、首先用的是vant组件，自带遮罩层Overlay，第一步是在main.js中引用该组件并在app.vue中应用。（具体官网都有，此处不再赘述） app.vue中 <van-overlay :show="show"> <div class="wrapper"> <img src="../public/
移动端强行横屏
这是一个前端小白的博客。
06-29 308
横屏的使用 .c-box { width: 100vmax; height: 100vmin; transform-origin: top left; transform: rotate(90deg) translate(0, -100vmin); } 用这个来实现强行横屏，也会出现很多的问题，比如在iPad上用overflow: auto;的话会导致滑动不精准，或者卡顿，-webkit-overflow-scrolling: touch;因此需要加上这个属性来解决他的一个卡顿的问题。 单位的使用
Vue检测web端和移动端，并强制手机横屏
acheding的博客
11-12 2815
mounted() { if (navigator.userAgent.match(/(iPhone|Android|iPad)/i)) { let width = document.documentElement.clientWidth; let height = document.documentElement.clientHeight; if (width < height) { alert("手机屏幕横过来嗷"); .
vue 移动端echarts横屏竖屏展示
qq_40043424的博客
04-19 1880
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title
vue项目实现pc端和手机端屏幕自适应
weixin_72459765的博客
10-28 6488
vue项目实现pc端和手机端屏幕自适应
vue3编写H5适配横竖屏
weixin_52663662的博客
02-28 1965
2、把可以区分横屏还是竖屏的字段参数（自定义名字），存储进去vuex / pinia,方便后续统一更改每个页面适配样式。4、每个做好屏幕，横、竖屏两套样式，监听横屏还是竖屏的字段参数，展示出对应的横屏还是竖屏class样式。1、监听浏览器屏幕变化，通过监听屏幕宽高，辨别出是横屏，还是竖屏状态。在项目的起始根页面进行监听，我就是在App.vue文件下进行监听。3、在App.vue的全局监听添加 pinia 参数字段。
vue移动端禁止横屏
08-18
在Vue移动端中禁止横屏可以通过以下步骤实现： 1. 在Vue项目的根目录下找到`src/main.js`文件，打开它。 2. 在`main.js`中，找到`created`生命周期函数，并添加以下代码： ```javascript created() { // 监听屏幕方向变化 window.addEventListener("orientationchange", this.handleOrientationChange); }, ``` 3. 在`methods`中，添加`handleOrientationChange`方法： ```javascript methods: { handleOrientationChange() { // 判断屏幕方向是否为横屏 if (window.orientation === 90 || window.orientation === -90) { // 如果为横屏，则强制将屏幕方向调整为竖屏 window.orientation === 0 && window.orientation !== 180 && window.orientation !== -180 && (window.orientation = 0); } }, }, ``` 4. 最后，在销毁组件时移除监听事件，添加以下代码到`destroyed`生命周期函数中： ```javascript destroyed() { window.removeEventListener("orientationchange", this.handleOrientationChange); }, ``` 这样，当用户在移动设备上尝试横屏时，屏幕会被强制调整为竖屏方向，从而禁止横屏显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

侧耳倾听...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值