最初是在script中注册的resize事件，遇到一个问题，窗口发生变化的时候，vue无法监听到窗口的变化，从而无法更新绑定的值。
解决：在mounted钩子中注册resize事件，在使用watch监听数据的变化，重新赋值
vue.js移除绑定的点击事件的方法： 可以用 v-on 指令监听 DOM 事件： Greet 绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法： var vm = new Vue({ el: '#example', data: {1、style 中设置竖屏时的屏幕处理 @media screen and (orientation:portrait)@media screen and (orientation: portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0
transform: rotateZ(90deg) translateY(-100%)
}
}
2、在页面加载的时候，进行必要的页面宽高处理
forceLandscapeScreenHandle() {
const body = document.getElementsByTagName('body')[0]
const html = document.getElementsByTagName('html')[0]
const width = html.clientWidth
const height = html.clientHeight
const max = width >height ? width : height
const min = width >height ? height : width
body.style.width = max + "px"
body.style.height = min + "px"
}
三、注意事项
1、添加窗口变化的重新 宽高处理
onWindowSizeChanged() {
window.addEventListener("resize", this.forceLandscapeScreenHandle)
}
2、为了页面的变化太多，可以设置屏幕的最大最小比例
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
四、效果预览
五、实现步骤
这里构建 Vue 工程，可参见
Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）_仙魁XAN的博客-CSDN博客
1、打开 Vue 工程，在 public/index.html 中添加如下 meta 标签处理，屏幕比例的限制处理
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2、在 src/App.vue 中添加测试的内容
3、添加 style 样式，关键处理竖屏时的页面，相关如下
4、在页面加载进行 宽高处理
5、最后运行工程，效果如下
六、关键代码
1、public/Index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %>doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、src/App.vue
<template>
<div id="container">
TestForceLandscapeScreen
</div>
</template>
<script>
export default {
name: 'ThreeTest',
components: {},
data() {
return {}
},
mounted() {
this.init()
},
methods: {
init() {
this.forceLandscapeScreenHandle()
// 这里监控
this.onWindowSizeChanged()
},
forceLandscapeScreenHandle() {
const body = document.getElementsByTagName('body')[0]
const html = document.getElementsByTagName('html')[0]
const width = html.clientWidth
const height = html.clientHeight
const max = width >height ? width : height
const min = width >height ? height : width
body.style.width = max + "px"
body.style.height = min + "px"
},
onWindowSizeChanged() {
window.addEventListener("resize", this.forceLandscapeScreenHandle)
}
},
// beforeDestroy 废弃，使用 beforeUnmount
beforeUnmount() {
}
}
</script>
<style>
#app {
/*文字居中*/
display: flex
justify-content: center
align-items: center
text-align: center
height: 100%
}
* {
/*初始化样式*/
margin: 0
padding: 0
}
html {
/*用于 获取 屏幕的可视宽高*/
width: 100%
height: 100%
overflow: hidden
}
body {
/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
position: fixed
left: 0
top: 0
width: 100%
height: 100%
}
@media screen and (orientation: portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0
transform: rotateZ(90deg) translateY(-100%)
}
}
</style>
七、其他
1、参考博文
1）移动端如何让页面强制横屏_Fizz_kai的博客-CSDN博客_html 强制横屏
2）h5横屏（以vue为例） - 江峰★ - 博客园
2、其他实现强制横屏参考
强制横屏展示，这里用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可。代码如下：
在mounted生命周期中监听resize事件：window.addEventListener('resize', this.resize)
resize方法如下：
resize () {
var width = window.innerWidth,
height = window.innerHeight,
$wrapper = document.getElementById("app"),
style = ""
if (width >= height) { // 横屏
style += "width:" + width + "px" // 注意旋转后的宽高切换
style += "height:" + height + "px"
style += "-webkit-transform: rotate(0)transform: rotate(0)"
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px"
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px"
}
else { // 竖屏
style += "width:" + height + "px"
style += "height:" + width + "px"
style += "-webkit-transform: rotate(90deg)transform: rotate(90deg)"
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px"
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px"
}
$wrapper.style.cssText = style
}
接下来就是适配的问题了。我采用的是vw跟vh。以前没用过，初次接触，用过之后感觉真的挺好用的。
假如ios用户开启了屏幕固定或者android用户开启了屏幕自动旋转。这两种情况下，会有一点不一样。这时候使用css判断横竖屏就显得尤其重要了。代码如下：
/* 竖屏 */
@media screen and (orientation:portrait) {
// 以vw为单位
}
/* 横屏 */
@media screen and (orientation:landscape) {
// 以vh为单位
}
在竖屏的时候使用vw来进行适配。即根据屏幕的宽度来适配。这里以375 x 667的设计稿为例。例如：一个元素宽为526，高为314。根据屏幕的宽度来适配的话就是526/375 * 100% vw、314/375 * 100% vw了。
如果是横屏的话，就是用vh来进行适配。即根据屏幕的高度来适配。同样以375*667的设计稿为例。此时元素宽为526，高为314。就该写成宽为526/375 * 100% vh、高为314/375 * 100% vh了
tips:最近又重新研究了一下横屏这个，发现其实不管ios用户是否开启了屏幕固定或者android用户是否开启了屏幕自动旋转，，都不需要使用css判断横竖屏来写两套样式了，只需要以正常情况(即竖屏下)的宽度来计算，然后使用vmin作为单位即可，这样写一套样式就全部搞定了。（vmin是相对于视口的宽度或高度中较小的那个来计算的）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）