检测设备方向答案

【问题标题】：Detect device orientation检测设备方向
【发布时间】：2023-03-09 07:44:02
【问题描述】：

运行响应式单页应用程序，有包含内容的框对象。这些旨在具有背景图像。然而，对于手持设备，方向成为一个问题，因为盒子的宽度和高度比例会发生变化。

检测设备和视口大小并不是建立在统一程序之上的任务。在我看来，假设用户拥有相对现代的浏览器，CSS3 和调用 @media screen and (orientation:landscape) 是最安全的选择。

假设图像将被裁剪为水平和垂直版本以及带有无方向编码的标签

<div class="box" style='background:  url("https://somewhere.amazonaws.com/general-purpose-images/splash.jpg") no-repeat fixed; background-size: 100% 100%; background-attachment: scroll;'>

如何根据方向有效地切换？

【问题讨论】：

标签： css device-orientation

【解决方案1】：

为图像设置一个带有类的 div

<div class="img_a">

然后根据方向或您可能需要实现的any other media queries 定义所需图像的 CSS 规则

@media screen and (orientation: portrait)
  { div.img_a 
      { background: url(https://[...]img_a.jpg) no-repeat fixed; }
  [...] }
@media screen and (orientation: landscape)
  { div.img_a 
      { background: url(https://[...]img_a_horizontal.jpg) no-repeat fixed; }
  [...] }

【讨论】：