javascript - 通过纵向/横向 View 显示不同的数据

Question

当用户在 Web 应用程序中从纵向 View 切换到横向 View 时，是否有一种处理方法？就像当您在纵向 View 中查看 Web 应用程序时，您看到的是正常数据。

然后，当您将设备切换为横向 View 时，您会看到一些不同的数据。

我的问题:是否有一种方法可以使用纯 JavaScript 和 CSS 来实现这一点？还是我必须依赖 API？

更新:我找到了一种使用 Device Orientation API 使用纯/普通 JS 来完成它的方法我找到了一个例子，它完成了我想做的事情，但我不能让它正常工作，因为每次旋转大于 90 时 if 语句都会打断我，即使我放了一个变量来检查是否旋转已经是 90。

function init() {
        var compass = document.getElementById('compass'),
        comp = document.getElementById("comp");
        if(window.DeviceOrientationEvent) {

          window.addEventListener('deviceorientation', function(event) {
                var alpha;
                //Check for iOS property
                if(event.webkitCompassHeading) {
                  alpha = event.webkitCompassHeading;
                  //Rotation is reversed for iOS
                  compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)';
                }
                //non iOS
                else {
                  alpha = event.alpha;
                  webkitAlpha = alpha;
                  if(!window.chrome) {
                    //Assume Android stock (this is crude, but good enough for our example) and apply offset
                    webkitAlpha = alpha-270;
                  }
                }

                compass.style.Transform = 'rotate(' + alpha + 'deg)';

//THIS IS THE PART I'VE ADDED
var iftrue = false;
comp.innerHTML = alpha + "deg";
if (alpha >= 90 && alpha <= 100) {
    if (!iftrue) {
        alert("it is");
        return iftrue = true;
    };
}
else if (alpha <= 90) {console.log("it is not");
};
//TILL HERE                    compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)';
                //Rotation is reversed for FF
                compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 
              }, false);
        }
      }

Answer 1

您可以使用 CSS 媒体查询来检测设备是横向还是纵向。使用 CSS，您可以定义何时显示哪些信息。例如:

/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3) { 
/* Your styles */
}

/* Portrait */
@media only screen 
 and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3)
 and (orientation: portrait) { 
 /* Your styles */
}

/* Landscape */
@media only screen 
 and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3)
 and (orientation: landscape) { 
 /* Your styles */
}

参见 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/更多示例。