JS和css实现检测移动设备方向的变化并判断横竖屏幕

JS和CSS可以结合使用来检测移动设备方向的变化并判断横竖屏幕。下面是实现的步骤：

1. 通过JS检测屏幕方向变化

JS通过window.orientation来获取屏幕的方向，值为0表示竖屏，值为90或-90表示横屏。

window.addEventListener("orientationchange", function() {
  if (window.orientation == 0) {
    // 竖屏
  } else {
    // 横屏
  }
});

2. 通过CSS样式实现横竖屏幕布局

当屏幕方向变化时，可以通过CSS样式实现相应的横竖屏幕布局。例如，当屏幕为竖屏时，在CSS中设置为：

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

当屏幕为横屏时，在CSS中设置为：

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

示例1：利用JS和CSS兼容处理横竖屏幕问题：

function handleOrientationChange() {
  var mediaQuery = window.matchMedia("(orientation: portrait)");

  if (mediaQuery.matches) {
    // 竖屏模式
    document.getElementById("container").className = "portrait";
  } else {
    // 横屏模式
    document.getElementById("container").className = "landscape";
  }
}

window.addEventListener("orientationchange", handleOrientationChange);

// 首次加载时的判断
handleOrientationChange();

#container {
  width: 100%;
  height: 100%;
}

.portrait {
  /* 竖屏样式 */
}

.landscape {
  /* 横屏样式 */
}

示例2：通过JS计算设备宽高比例来判断屏幕方向

var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var aspectRatio = viewportWidth / viewportHeight;

if (aspectRatio < 1) {
  // 竖屏
} else {
  // 横屏
}

通过计算设备宽高比例来判断屏幕方向只适用于某些比例较为固定的设备上，如果设备宽高比例变化较大，就需要通过上面介绍的window.orientation API来判断屏幕方向。