javascript - 旋转时重置 CSS

Question

我正在使用一些 CSS 来设置我页面上图像元素的大小。问题是，如果用户旋转他们的手机，它会保持固定在原始尺寸上。有没有办法检测旋转，并重新计算元素应该在页面上的大小？

这是我到目前为止发现的...

window.addEventListener("orientationchange", function() {}, false);

Answer 1

当然，您可以使用 CSS media queries对于这类事情:

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

如果您想扩展和定位桌面设备与移动设备等，您可以将媒体查询扩展到相当具体。

或者 - 使用 JS 你可以简单地做:

var orientation = null;
window.onresize = function (event) {
    orientation = parseInt(window.innerHeight / window.innerWidth) !== 0 ? 'portrait' : 'landscape';
    /* logic for if orientation == portrait etc goes here */
};