更靠谱的H5横竖屏检测方法（js代码）

近期，我接触到一个关于横竖屏检测的H5项目，深感其重要性。横竖屏切换时，页面的布局和交互需要做出相应的调整，这就需要我们采用一些有效的方法来检测屏幕的方向变化。下面，我将详细介绍几种横竖屏检测方法，并分享一些实践中的经验和改进方案。

方案一：使用orientationchange事件

我们可以利用浏览器的orientationchange事件来监听横竖屏的变化。在实际应用中，我们可能会遇到兼容性问题。因为并非所有的浏览器都支持orientationchange事件以及event.orientation或screen.orientation.angle属性。这使得这种方法的可靠性受到挑战。

方案二：结合resize事件与窗口尺寸判断

由于方案一存在兼容性问题，我们可以考虑结合resize事件和窗口尺寸判断来实现横竖屏检测。这种方法的基本原理是：当窗口大小发生变化时，根据窗口的宽高比来判断屏幕的方向。只要窗口大小发生变化，就会触发resize事件，可能导致性能问题。我们可以使用setTimeout来优化处理逻辑。如果有多个地方需要监听横竖屏变化，可以考虑通过订阅与发布模式来改进，只注册一个resize事件负责监听横竖屏变化，然后通过触发事件通知订阅者。

方案三：基于CSS3@media媒体查询实现

在CSS3中，我们可以使用@media媒体查询来根据不同的屏幕方向应用不同的样式。这种方法是一种真正的横竖屏检测，因为它直接基于浏览器的布局上下文来判断屏幕方向。这种方法不能直接触发JavaScript中的事件，但可以结合其他方法使用。例如，我们可以在CSS中设置特定的类名来标识屏幕方向，然后通过JavaScript监听这些类名的变化来判断横竖屏的变化。

总结与改进方向：

在实际项目中，我们可以根据项目的需求和实际情况选择适合的方案。对于追求更好兼容性和性能的项目，可以考虑结合多种方法来实现横竖屏检测。未来的改进方向可以包括：深入研究不同浏览器的横竖屏检测机制，寻找更可靠的解决方案；利用新技术如Service Workers来优化横竖屏检测的逻辑；以及更多基于CSS的解决方案，以实现更优雅的横竖屏切换体验。

@media兼容性：横竖屏自适应的CSS与JS实现策略

随着移动设备的普及，横竖屏切换已成为日常浏览中的常态。为了确保网页在不同屏幕方向下都能优雅地展示，我们需要深入@media兼容性问题。本文将介绍一种利用CSS和JS实现横竖屏自适应的有效策略。

一、背景与实现思路

几乎所有的移动端浏览器都支持CSS3 media。我们可以通过创建特定的css样式来标识横竖屏状态，并通过JS向页面中注入这些CSS代码。当屏幕大小变化时，我们可以通过resize回调函数获取横竖屏的状态，并据此调整页面布局。

二、核心实现方式

1. 选择标签的font-family作为检测样式属性。之所以这样做，主要是为了避免reflow和repaint，同时font-family的特性也为我们提供了便利。它会优先使用排在前面的字体，如果找不到该种字体，则使用下一种，直至找到满足需求的字体。

2. 关键代码

在resize回调函数中，我们首先通过计算样式获取当前font-family的值，然后根据横竖屏状态拼接出特定的CSS样式字符串。接着，我们通过loadStyleString函数将样式载入页面，并给标签添加一个标识类。我们根据font-family的值判断当前的屏幕方向，并触发相应的横竖屏变化事件。

三、测试效果展示

在实际测试中，当屏幕方向为竖屏时，页面将呈现出一种特定的“portrait效果”；而当屏幕方向为横屏时，将展现出另一种“landscape效果”。

四、方案优化

我们可以进一步改进这一方案，当浏览器支持原生的orientationchange事件时，就使用这一事件来监听屏幕方向的变化；当不支持时，再回退到上述方案。这样，我们可以确保在各种情况下都能为用户提供最佳的浏览体验。

横竖屏转换的秘密：一段代码的演变之旅

今天，我想和大家分享一段关于移动端横竖屏检测的有趣代码。在移动设备上，当屏幕方向从横屏切换到竖屏或者反过来时，我们需要知道屏幕方向的变化，以便适应不同的显示需求。这就需要监听“orientationchange”事件。并非所有的浏览器都支持这一事件。为了解决这个问题，我们决定基于浏览器的事件机制，尝试模拟orientationchange事件。接下来，让我们看看其中的关键代码。

我们需要检查浏览器是否支持“orientationchange”事件：

```javascript

// 检测浏览器是否支持orientationchange事件

var isOrientationSupported = ('orientation' in window && 'onorientationchange' in window);

```