通过 portrait/landscape 视图显示不同的数据

Question

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

然后，当您将设备转到横向视图时，您会看到一些不同的数据。

我的问题：有没有办法用纯 JavaScript 和 CSS 来完成这个？还是我必须依赖 API?

更新：我找到了一种使用 pure/plain JS 使用 Device Orientation API 来完成它的方法，我找到了一个例子来完成我想做的事情，但我不能让它正常工作，因为 if 语句每次旋转大于 90 时都会打扰我，即使我放了一个变量来检查旋转是否已经是 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

如果使用 Twitter Bootstrap 你可以这样做：

phone

上隐藏的文字文本在小型设备上可见

请查看 Twitter Bootstrap documentation 了解更多信息：

Answer 2

您可以使用 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/。

通过 portrait/landscape 视图显示不同的数据

Displaying different data through portrait/landscape view

html

javascript

css

device-orientation