<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->
设置横屏应用得在config里面设置，网页是无法做到的
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是相对于视口的宽度或高度中较小的那个来计算的）
