您好，我想在移动设备上旋转 html 页面，所以我有一个 div，它占用屏幕的所有宽度和高度，在 div 内部有一个图像，所以当页面重新调整大小时，图像也会重新调整大小到(以响应方式)我的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:
<!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>
当我重新调整页面大小时图像大小调整到的结果很好但是现在当我在移动设备中打开此页面时我需要始终以横向 View 显示所以我尝试这样做:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" />
喜欢这个link我把 landscape.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%;
}
div#cont {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
并且在 portrait.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%;
}
表格link但它不起作用，所以任何帮助，非常感谢。
最佳答案
您可以使用 Javascript Detecting device orientation
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 */
}
或使用 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)">
关于javascript - 如何在移动旋转时旋转 HTML5 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25769031/