js - js+css实现横竖屏变换自动使用不同样式

最新推荐文章于 2024-04-17 14:28:14 发布

yuuuuchang

最新推荐文章于 2024-04-17 14:28:14 发布

阅读量4.2k

点赞数

分类专栏：问题解决过程文章标签： js切换横竖屏旋转屏幕应用不同样式

本文链接：https://blog.csdn.net/yuuuuchang/article/details/79054634

版权

这篇博客讲述了如何在用户旋转屏幕时自动应用不同的CSS样式，避免手动刷新页面。作者通过js监听屏幕方向变化，动态调整rem值，并讨论了在不同场景下是否需要页面刷新以及遇到的兼容性问题，特别是针对微信内置浏览器的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今晚我在写一个页面, 要求是在用户旋转屏幕的时候应用不同的样式,让网页更好地表现内容. 难点不在于根据横竖屏来设置不同的样式, 而是在于在用户旋转屏幕之后需要刷新一下才能应用新的样式, 这样贼麻烦.

因此今晚搞了两个小时, 终于实现在旋转屏幕的时候自动切换样式了

首先, 我写的这个页面在dom加载完成后会获取当前屏幕的宽度进行计算rem. 也就是说, 如果用户第一次打开这个网页是竖着看的时候, 是根据手机上的短边(屏幕宽度)来计算的.(通过设置html的font-size)

(function page_first() {
	//设置font-size 1rem = 10vw
	document.addEventListener('DOMContentLoaded', function() {
		document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
	}, false);
}());

这里我设置为屏幕宽度=10rem, 这样子好计算

接下来, 我写了个@media的css样式, 设置了一下横屏和竖屏样式

@media screen and (orientation: portrait) {
	/* 竖屏样式 */
}
@media screen and (orientation: landscape) {
	/* 横屏样式 */
}

那么这时候我就看了一下效果

结果是, 我竖屏的时候正常显示(是我要的效果), 当我切换横屏的时候, 还是竖屏的样式, 直到我刷新了

最低0.47元/天解锁文章