CODEWITHSUNDEEP
javascriptjquerycsshtml
Fadi
Fadi

Reputation: 2370

How to rotate HTML5 page on mobile rotation

hi i'm trying to rotate html page on mobile so i have a div that take all the width and the height of the screen and inside the div an image so when the page is re-sized the image is re-sized to (in responsive way) my 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%;
}

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

and the result was good when i re-size the page the image is re-sized to but now when i open this page in mobile i need to display in landscape view always so i try to do this: 

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

like in this link and i the landscape.css i put this:

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);
}

and in the 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%;
}

form link but it is not working so any help and many thanks.

Upvotes: 0

Views: 4677

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

You can use Javascript Detecting device orientation

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

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

or CSS media queries

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

or using 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)">

Upvotes: 2

Related Questions