uniapp项目H5端横屏问题-样式错乱+字体大小+video
项目场景:
项目场景:uniapp项目 H5端,由于用户手机打开了旋转模式,横屏的话H5会变形,之前设计没做这方面的样式兼容。
问题描述:
部分用户手机打开了旋转之后,打开H5会有样式混乱问题。
原因分析:
因为前期产品设计没有考虑到横屏,开发也没做兼容。
解决方案:
方案1
通过媒体查询设置2套样式
// portrait 为判断为竖屏
@media only screen and (orientation: portrait) {// 需求代码
}// landscape 为判断为横屏
@media only screen and (orientation: landscape) {// 需求代码
}
举个栗子:
<template><view class="content"><view>Box 1</view><view>Box 2</view><view>Box 3</view></view>
</template><script>// import rotate from '@/utils/rotate'export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>@media (orientation: portrait) {.content {flex-direction: row;background-color: aqua;}}@media (orientation: landscape) {.content {flex-direction: column;background-color: red;}}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 30rpx;}
</style>
细心的同学会发现 flex-direction: column;
在媒体查询中不生效,原因是媒体查询的级别比类选择低,需要将.content中的属性去掉即可!
注意下面的字体大小,额外问题讲解~
竖屏:
横屏:
方案2
通过JS监听屏幕有无打横,有的话设置一个遮布,提醒用户需要不能打横。
部分原生组件在移动端,层级比遮罩高,所以判断是否有video(有其他的自行判断),有的话则需要隐藏。
另外一个情况就是如果video全屏下,手机打横要怎么处理,isHiddenModal 这里做了处理~
// 此处代码是网上参考一个作品的,出处可以评论叫我加连接~
/** @Author: Penk* @LastEditors: Penk* @LastEditTime: 2022-06-14 14:08:06* @FilePath: \msedu-front-yunkai-uniapp\src\utils\rotate.js*/
(function rotate() {var orientation = window.orientation;var pd = null;function createPd() {if (document.getElementById('preventTran') === null) {var imgData = 'data:image/png;base64,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';pd = document.createElement('div');pd.setAttribute('id', 'preventTran');pd.style.position = 'fixed';pd.style.left = '0';pd.style.top = '0';pd.style.width = '100%';pd.style.height = '100%';pd.style.overflow = 'hidden';pd.style.backgroundColor = '#2e2e2e';pd.style.textAlign = 'center';pd.style.zIndex = '99999';document.getElementsByTagName('body')[0].appendChild(pd);var img = document.createElement('img');img.src = imgData;pd.appendChild(img);img.style.margin = '60px auto 30px'var br = document.createElement('br');var p = document.createElement('p');p.style.width = '100%';p.style.height = 'auto';p.style.fontSize = '22px';p.style.color = '#626262';p.style.lineHeight = '34px';p.style.textAlign = 'center';p.innerHTML = '为了您的良好体验';p.appendChild(br);p.innerHTML += '请将手机/平板竖屏操作';pd.appendChild(p);}}if (orientation == 90 || orientation == -90) {if (pd == null && document.getElementById('preventTran') === null) {createPd();}document.getElementById('preventTran').style.display = 'block';isHiddenModal(true);} else {isHiddenModal(false);}window.onorientationchange = function () {if (pd == null && document.getElementById('preventTran') == null) createPd();document.getElementById('preventTran').style.display = 'none';rotate();};
})();// 判断是否需要隐藏video
function isHiddenModal(flag = true) {// 此处检测是否有视频全屏,有的话不限制遮罩var handle = document.querySelector(".video");let fullFlag = getFullscreenElement();if (handle) {if (flag && !fullFlag) {handle.style.display = 'none';} else {handle.style.display = 'block';}}
}// 获取当前全屏的句柄
function getFullscreenElement() {return !!(document.fullscreenElement ||document.mozFullScreenElement ||document.msFullScreenElement ||document.webkitFullscreenElement || null);
}export default {}
横屏效果:
额外问题:
1、屏幕一开始根据H5端是打横还是打竖来确定屏幕的宽度,导致upx或者rpx的字体大小初始化问题就固定了其比例。
解决方案1:使用px,不建议,因为使用px就无法做到自动适配,另外如果是老项目,工程量大。
解决方案2:配置uniapp,修改pages.json文件,固定宽度,确定也是不能自动适配。
{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"rpxCalcMaxDeviceWidth": 750, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}
查看官网 点击此处
官方文档里面写着,又可能会引生其他bug,所以说不能随便滥用rpx,upx之类的…hhhhh~
不过我们这个也要根据项目来确定的,我们的项目是用于H5以及小程序端,给的设计稿也是750px来设计的,所以上面配置对于我们项目影响不大。
uniapp项目H5端横屏问题-样式错乱+字体大小+video相关推荐
- 解决uniapp在H5端使用不能扫码问题
前言 uniapp自带的扫码功能在H5端不能使用已踩坑,下面是解决方案,利用调用手机自带的相机和相册来进行扫码 提示:以下是本篇文章正文内容,下面案例可供参考 一.解决uniapp在H5端使用不能扫码 ...
- 关于移动端页面在手机调整字体大小后无法正常显示(已解决)
关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到, 已经完成的移动端页面,正常情况下在手机上的浏览器端和App端都可以正常显示,可当测 试把手机字体调大后,布局就忽然变乱 ...
- Markdown修改文字样式(字体, 大小, 颜色, 高亮底色)
Markdown修改文字样式(字体, 大小, 颜色, 高亮底色) 简介 字体.字号与颜色 表格样式设置 背景色.文字颜色 跨行表格 想要了解更多 颜色名列表 原文参考链接 简介 Markdown是一种 ...
- uni-app项目h5本地访问接口配置
创建uni-app项目 找到manifest.json文件 点击源码视图 如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序
- uni-app 非H5端,手机顶部状态栏区域设置
效果图: 由于特殊需求,页面不需要默认的状态栏,这就需要隐藏状态栏了 隐藏状态栏方法: 在pages.json配置文件中,找到不需要显示状态栏的页面配置处 添加:"navigationSty ...
- div html表格样式设置字体大小,css样式表中如何修改字体大小为18px?
css样式表中如何修改字体大小为18px?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css样式表中如何修改字体大小为18px? 在css样式表中可以 ...
- 移动端应该如何动态设置字体大小?
rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在 ...
- CSDN博客字体样式、字体大小、字体颜色、首行缩进调节
1.字体样式调节 1.<font face="微软雅黑">微软雅黑</font> 2.<font face="华文琥珀">华 ...
- uniapp的H5端之微信JsSdk的开放标签以及Api使用心得
前言:项目是uni写的微网页,前期功能还算正常,但是随着项目进程,发现某些地方不得不使用微信sdk了,比如跳转app导航和从微信浏览器跳转到微信小程序,于是开始研究微信sdk的使用方式,中间还是遇到不 ...
最新文章
- 查询出每个部门比本部门平均工资高的职工人数
- java 随机生成常用汉字_Java随机生成中文汉字
- Verilog中关于case语句的优先级
- Java学习笔记28
- Android开发--图形图像与动画(五)--详解LayoutAnimationController
- 在浏览器中内嵌word_关于项目浏览器内核的选取解读
- mac下nvm_【干货分享】Mac最全用法指导,学不会学费全退!!!(反正我也没收你们学费)...
- 条件注释判断兼容浏览器版本CSS HACK !--[if !IE]!--[if IE]!--[if lt IE 6]!--[if gte IE 6]...
- Netty工作笔记0085---TCP粘包拆包内容梳理
- mysql在windows配置多节点_mysql基础--windows下的多实例配置
- 软件测试人不得不读的经典书籍推荐
- 如何开启outlook邮箱的pop3和smtp_怎么在电子邮件客户端上登录腾讯邮箱(QQ邮箱 )?
- CentOS 下的包管理工具RPM
- Linux学习日志--共享内存
- cpu飙升 死循环_CPU飙升问题的解决实例
- Building Maintainable Software-java篇之Separate Concerns in Modules
- 电影和电视Movies and TV
- php高洛峰_PHP 验证码 高洛峰 细说PHP
- 《ClickHouse企业级应用:入门、进阶与实战》1 全面了解ClickHouse
- python读取短信验证码_我用Python给你发了个短信验证码,你也来试试