xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

强制横屏

Browse Source
ds1.0
fanluyan 2 years ago
parent fddc03dee3
commit d4f1258bcb
3 changed files with 53 additions and 62 deletions
Show Stats Download Patch File Download Diff File

3
public/index.html
Unescape Escape View File

@ -3,10 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/> />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!-- <title><%= htmlWebpackPlugin.options.title %></title> --> <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->

62
src/App.vue
Unescape Escape View File

@ -7,25 +7,51 @@
export default { export default {
name: "App", name: "App",
data() { data() {
return { return {};
pageScreen: window.innerWidth,
};
},
mounted() {
this.pageWidth();
},
methods: {
pageWidth() {
console.log(this.pageScreen);
window.addEventListener("resize", () => {
this.pageScreen = window.innerWidth;
});
},
},
created() {
//new DevicePixelRatio().init();
}, },
watch: {},
created() {},
mounted() {},
methods: {},
}; };
</script> </script>
<style lang="less"></style> <style lang="less">
// @media only screen and (orientation: portrait) and (max-width: 768px) {
// /*竖屏 css*/
// // 需求代码
// html {
// width: 100vmin !important;
// height: 100vmax !important;
// }
// body {
// width: 100vmin !important;
// height: 100vmax !important;
// }
// #app {
// width: 100vmax !important;
// height: 100vmin !important;
// transform-origin: top left;
// transform: rotate(90deg) translate(0, -100vmin);
// }
// .el-menu--horizontal {
// }
// }
// landscape 为判断为横屏
@media only screen and (orientation: landscape) and (max-height: 600px) {
/*横屏 css*/
// 需求代码
#app {
//background: #f00;
}
}
</style>

50
src/components/common/Home.vue
Unescape Escape View File

@ -24,32 +24,8 @@ export default {
components: { components: {
vHead, vHead,
}, },
mounted() { mounted() {},
this.init(); methods: {},
},
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);
},
},
created() {}, created() {},
}; };
</script> </script>
@ -73,22 +49,6 @@ export default {
} }
} }
@media screen and (orientation: portrait) {
/*竖屏样式*/
#app {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}
// @media screen and (orientation: landscape) {
// /*这是横屏模式，所以您需要做一些不一样的事情*/
// #app {
// // position : absolute ;
// transform: rotate(0deg);
// transform-origin: 0% 0%;
// }
// }
@media (max-width: 900px) { @media (max-width: 900px) {
.greenStyle .header { .greenStyle .header {
// background: #000; // background: #000;
@ -267,6 +227,12 @@ export default {
margin-top: 120px !important; margin-top: 120px !important;
} }
} }
.parameterSetDialog {
.el-dialog {
width: 100% !important;
margin-top: 140px !important;
}
}
} }
//realTimeSearch历史图片 //realTimeSearch历史图片
.realTimeSearch { .realTimeSearch {

Write Preview
Loading…
Cancel
Save