javascript - How to rotate HTML5 page on mobile rotation -

-

hi i'm trying rotate html page on mobile have div take width , height of screen , inside div image when page re-sized image re-sized (in responsive way) 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 result when re-size page image re-sized when open page in mobile need display in landscape view try this: 

<link rel="stylesheet" type="text/css" media="screen , (max-device-width: 768px)" href="portrait.css" />  <link rel="stylesheet" type="text/css" media="screen , (min-device-width: 1024px)" href="landscape.css" />

like in link , landscape.css 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 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 not working , many thanks.

you can use javascript detecting device orientation

function callback(){   alert(window.orientation);   if(window.innerheight > window.innerwidth){     /* code */   } }  window.addeventlistener('orientationchange', callback, true);

or css media queries

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

or using html

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

Comments

Post a Comment

Popular posts from this blog

javascript - how to protect a flash video from refresh？ -

-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flash video refresh</title> </head> <body> <div id="playerzone"><embed height="496" width="580" flashvars="flvid=19742822&amp;createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div> <a onclick="return test();" id="test">click me popup div,and hide scrollbar</a> </body> the code upon： for example,when click a#test button,popup div,it's no problem,but want hide scrollbar while div popup. i used $('html').css('overflow','hidden') in...
Read more

visual studio 2010 - Connect to informix database windows form application -

-
i trying figure out how connect ibm informix database. have been doing research , have found threads 5 years ago examples not working. i have installed latest sdk ibm informix. i have included ibm.data.informix.dll references in project. i have included using ibm.data.informix; i adding button , on click testing conenction. debug error "sql0035n file "c:\users\adam\documents\visual studio 2010\projects\test\test\msg\en_us\db2nmp.xml" cannot opened." this file not exist , dont see anywhere in program files (x86)\ibm informix client sdk directory. my on click code is private void button1_click(object sender, eventargs e) { const string host = "192.168.obfuscated"; const string servicenum = "1525"; //port? const string server = "serverobfuscated"; const string database = "dbobfuscatedy"; const string user = "myusername"; const string password = ...
Read more

android - Associate same looper with different threads -

-
Image
in application, want create multiple threads working on single queue. create queue know need call looper.prepare() . i want other threads create should associated looper created first thread, how can achieve this? use 1 of java thread safe queue class java.util.concurrent package instead of looper achieve goal. it's more common practice. share queue between threads , post task queue entry 1 thread can entry thread. blockingqueue can - in 1 thread call take() , block thread until thread put() entry queue. that's all. producer consumer pattern example blockingqueue or concurrentlinkedqueue about blockingqueue
Read more