Javascript 如何在移动旋转上旋转HTML5页面_Javascript_Jquery_Css_Html

Javascript 如何在移动旋转上旋转HTML5页面

javascript jquery css html

Javascript 如何在移动旋转上旋转HTML5页面,javascript,jquery,css,html,Javascript,Jquery,Css,Html,您好，我正在尝试在手机上旋转html页面，因此我有一个div，它占据了屏幕的所有宽度和高度，并且在div图像内部，因此当页面重新调整大小时，图像的大小将重新调整为（以响应方式）我的css：和html： <!DOCTYPE html> <html> <head> <title>Card Game</title> <link rel="stylesheet" type="text/css" href="CSS/s

您好，我正在尝试在手机上旋转html页面，因此我有一个div，它占据了屏幕的所有宽度和高度，并且在div图像内部，因此当页面重新调整大小时，图像的大小将重新调整为（以响应方式）我的css：

和html：

<!DOCTYPE html>

<html>

<head>
    <title>Card Game</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>      
   <div id="cont">
        <img id="menu" src="static/images/2%20main%20menu.jpg"/>
   </div>
</body>
</html>

在

grait.css中
    body, html {    
  height: 100%;
}

body {
 background-color: #1E4922;
}

div#cont {
  height: 100%;
}

img#menu {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

形式，但它不工作，所以任何帮助和感谢
 您可以使用
或
或者使用HTML
<link rel="stylesheet" type="text/css" href="landscape.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="portrait.css" media="screen and (orientation: portrait)">


嗯，您不需要使用CSS来旋转页面。让电话来处理。如果站点响应，它将调整宽度以适应。使用旋转将导致您的文本（以及网站的所有其他方面）横向移动…好吧，但如果从手机打开，我需要它始终处于横向视图。尽管我建议您不要这样做，但如果用户处于纵向模式，您可以显示一条消息，告诉用户旋转设备。这通常只在HTML5游戏或类似的东西中完成。不要让你的网站只在一个方向上可见。当然，它可能在一个方向上比另一个方向上看起来更好，但不要强迫用户做一个或另一个。。。
body, html {    
  height: 100%;
}

body {
 background-color: #1E4922;
}

div#cont {
  height: 100%;
}

img#menu {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
div#cont {

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

    body, html {    
  height: 100%;
}

body {
 background-color: #1E4922;
}

div#cont {
  height: 100%;
}

img#menu {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

function callback(){
  alert(window.orientation);
  if(window.innerHeight > window.innerWidth){
    /* some code */
  }
}

window.addEventListener('orientationchange', callback, true);

/* portrait */
@media screen and (orientation:portrait) {
    /* some code */
}
/* landscape */
@media screen and (orientation:landscape) {
    /*  some code */
}

<link rel="stylesheet" type="text/css" href="landscape.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="portrait.css" media="screen and (orientation: portrait)">