带有画布的JQuery移动弹出窗口

Question

我希望在Jquery Mobile中创建一个弹出式窗口，其中嵌入了一个画布。

诀窍是我需要弹出窗口/cavans在横向模式下启动。不管屏幕的当前方向如何？

有什么建议吗？

谢谢

Answer 1

当您检测到设备处于纵向模式时，您可以在弹出内容上使用CSS转换将其旋转90度。

创建一个执行旋转的CSS类(-90表示逆时针，90表示顺时针)：

.rotateCCW {
    -ms-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg);
}

然后在弹出的popupbeforeposition事件中，检查方向并添加或删除CSS类：

$("#popupDialog").on("popupbeforeposition", function(event, ui) {
    if (is_landscape()){
        $("#popupDialog").removeClass("rotateCCW");
    } else {
        $("#popupDialog").addClass("rotateCCW");            
    }    
});

function is_landscape() {
  return (window.orientation === 90 || window.orientation === -90);
}

这里的

是一个