H5页面自动适应横竖屏

2023-02-18 06:17:02html-css021

H5页面自动适应横竖屏,第1张

对于样式：通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差，目前仅有： UC强制竖屏：<meta name="screen-orientation" content="portaint"> QQ强制竖屏：<meta name="screen-orientation" content="landscape"> 通过HTML标签media识别横屏和竖屏,分别引用不同的css：竖屏： <link rel="stylesheet" media="all and (orientation:portrait" href="portrait.css"> 竖屏： <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 通过css媒体查询判断横竖屏，并分别指定样式： @media screen and (orientation: portrait) { //竖屏 CSS } @media screen and (orientation: landscape) { //横CSS }对于事件：通过onorientationchange事件或resize事件监听手机的横竖屏，分别指定对应的事件。强制通过页面禁止app或手机的横竖屏的切换是不现实的，H5只能针对自身页面做适配！！！

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、为了页面的变化太多，可以设置屏幕的最大最小比例 <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 标签处理，屏幕比例的限制处理 <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"> <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>  </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是相对于视口的宽度或高度中较小的那个来计算的）

大家都知道css中<ul>元素中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白查了资料才实现下面GIF图的效果。（有什么更好的方法或者有写的不对的地方希望大神们多多指出，与君共勉）

效果GIF图：

第一步 ul 中的css设置 <ul id = "list"></ul>

#list { overflow-x: auto//设置x轴可滑动 list-style: none//去掉li上的小点 white-space:nowrap//元素不换行 width: auto(宽度) }

第二步 li中的css设置 <li class = "item">

.item { margin-left: 20px//每个li设置间距为20px display: inline-block//让所有的li在一行注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }

先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。

这只是在x轴上的滑动有一个相对的是overflow-y 只在y轴上滑动

width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性我们大可不惜自己去计算宽度，使用auto可以自适应宽度。

使用用flex-box布局

#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”