如何旋转HTML5页面的移动旋转

嗨，我想旋转手机上的HTML页面，所以我有一个div，采取所有的宽度和高度的屏幕和div内的图像，所以当页面重新尺度的图像的尺寸重新调整到（在响应方式）我的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%; 
}

和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>

，结果是很好，当我重新大小的页面图像是重大小，但现在当我在手机上打开此页时，我需要始终显示在横向视图，所以我试图做到这一点：

<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但它不工作，所以任何帮助，非常感谢。

来源

2014-09-10 Fadi

呃，你不需要用CSS来旋转页面。让手机处理。如果网站响应，它会调整宽度以适应。使用旋转会导致您的文本（和网站的所有其他方面）横向... – Jason 2014-09-10 15:15:12

好吧，但我需要它总是在横向视图，如果它从手机打开 – Fadi 2014-09-10 15:21:50

虽然我会建议反对它，你可以显示消息，告诉用户如果他们处于肖像模式，则旋转他们的设备。这通常只能在HTML5游戏中完成，或者具有这种性质。不要只让您的网站在一个方向上可见。当然，它可能在一个方向上看起来比另一个更好，但不要强迫用户做一个或另一个... – Jason 2014-09-10 15:24:56

您可以使用Javascript Detecting device orientation

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

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

或CSS media queries

/* 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)">

来源

2014-09-10 15:21:01

如何旋转HTML5页面的移动旋转

回答

相关问题