Question

然而，有人问过这个问题，特别是我想要完成的效果....

我刚刚完成了一个Javascript课程，并为我的网站编写了一个小脚本..它使用了Gantry Framework，并且与移动设备配合得很好。

如果您使用手机，并将手机保持水平，则会调整该页面的大小，如果您将手机设置为垂直，则会再次调整页面大小。

所以我写了这个

var cWIDTH = window.innerWidth;
if (cWIDTH < 640 ){
    document.getElementById("swapme").style.backgroundImage = "url('/images/backgrounds/top-image2.jpg')";
}

但是，它不会动态改变，例如..如果我转动手机它不会改变背景，除非我刷新页面。我一直在查看我网站上的文件中的Ajax / jQuery / JSON代码，这些代码似乎对此更改做出了反应，因此我可以插入一个函数触发器。

然而，一旦页面加载不是变量设置，直到你刷新页面？

如何动态获取变量，以及动态更改？

Answer 1

正如已经注意到的，你最好使用CSS媒体查询尝试这样的事情：

@media screen and (min-width: 641px) {
  #swapme {
    background-image: url('/images/backgrounds/top-image1.jpg');
  }
}

@media screen and (max-width: 640px) {
  #swapme {
    background-image: url('/images/backgrounds/top-image2.jpg');
  }
}

Answer 2

您需要将您编写的代码挂钩到window.onresize事件，并在窗口大小切换回时包含else子句。

话虽如此，如果没有使用媒体查询的JS，结果就更容易实现。

Answer 3

下面我用phonegap改变布局的一些示例代码。它利用了css 3的媒体查询。

    /* Ipad landscape mode */
    @media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: landscape) {
        article {
            float:left;
            padding-left: 55px;
        }
    }

/* Ipad portrait mode */
@media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: portrait) {
    article {
        float: left;
        width: 340px;
        padding-left: 15px; 
    }
}

Answer 4

存在检测设备方向何时发生变化的事件。

window.onorientationchange = function(e) {
    switch(e.orientation) {
        case 0:
            //...
            break;
        case -90:
            //...
            break;
        case 90:
            //...
            break;
        default:
            break; 
    }
}

在飞行中改变背景图像

4 个答案: