Как повернуть страницу HTML5 на мобильном вращении

привет, я пытаюсь повернуть html-страницу на мобильном телефоне, поэтому у меня есть div, который принимает всю ширину и высоту экрана и внутри div, поэтому, когда страница повторно -sized изображение вновь размера, чтобы (в отзывчивым образом) мой 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>

и результат был хорошим, когда я изменить размер страницы изображение повторно -sized, но теперь, когда я открываю эту страницу на мобильном телефоне, мне нужно постоянно отображать в альбомном режиме, поэтому я пытаюсь сделать это:

<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

ОК, но мне нужно, чтобы он всегда был в режиме просмотра, если он открыт с мобильных телефонов – Fadi

Хотя я бы рекомендовал против него, вы можете показать сообщение, в котором пользователю предлагается повернуть свое устройство, если оно находится в портретном режиме. Обычно это делается только в играх HTML5 или что-то в этом роде. Не делайте ваш сайт видимым только в одной ориентации. Конечно, это может выглядеть лучше в одной ориентации над другой, но не заставляйте пользователей делать то или другое ... – Jason

Вы можете использовать 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 на мобильном вращении

ответ

Смежные вопросы