가로 모드와 세로 모드의 모바일 장치를 기반으로 요소의 높이를 변경하려면 어떻게해야합니까?

"메인"div의 크기를 조정하여 뷰어의 전화 방향에 관계없이 바닥 글이 화면 하단에 표시되도록합니다 (멀리 있지 않은 경우). 자바 스크립트를 사용하여이 작업을 수행 할 수있는 방법이 있습니까?가로 모드와 세로 모드의 모바일 장치를 기반으로 요소의 높이를 변경하려면 어떻게해야합니까?

다음은 HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<link rel="stylesheet" type="text/css" href="about.css" /> 
<link rel="shortcut icon" type="image/x-icon" href="/about.ico"> 
<script type = "text/javascript" src="about.js"></script> 
    <body onLoad="baseSize()"> 
     <div id="container"> 
     <div id="header"> 
      <table id="navbar" align="center"><tr> 
       <td class="link"><a href="index.html">Home</a></td> 
       <td class="link"><a href="poetry.html">Poetry</a></td> 
       <td class="link"><a href="essays.html">Essays</a></td> 
       <td class="link"><a href="stories.html">Stories</a></td> 
       <td class="link"><a href="about.html">About</a></td> 
       <td><p id="icon">Craig InTheDell</p></td> 
      </tr></table> 
     </div> 
     <div id="main"> 
      <div id="text"> 
      <p>Hello! My name is Craig, Craig InTheDell. I love writing, and I love thinking. I hope that in reading some of my writings here, I have encouraged some of you to think, because after all, if thinking brings about being, better think and be than blank and blink out of existence! But whatever your cerebral activity right now, enjoy!</p> 
      </div> 
      <div id="contact"> 
      <h2>Questions or Comments?</h2><p>Shoot me an email at [email protected] I appreciate your feedback!</p></div> 
      <img src="dolphin.png"> 
     </div> 
     </div> 
     <div id="footer"> 
      <div id="image"></div> 
     </div> 
    </body> 
</html>

및 자바 스크립트

function baseSize() { 
    var available = window.screen.availHeight; 

    var right = document.getElementById("main"); 
    main.style.height = available + "px"; 
}

그것은 컴퓨터 화면과 휴대 전화의 가로 모드에서 잘 작동하지만 세로은 너무 짧다.

출처

2013-07-21 Matthew

This website might be helpful to you... 나는이 코드를 작성했지만 아직 테스트하지는 않았지만 도움이 될 것입니다.

// Define an event handler function to execute when the device orientation changes 
var onOrientationChange = function() { 

    // The device is in portrait orientation if the device is held at 0 or 180 degrees 
    // The device is in landscape orientation if the device is at 90 or -90 degrees 

    var isPortrait = window.orientation % 180 === 0; 
    var orientation = isPortrait ? 'portrait' : 'landscape'; 

    var viewPortWidth; 
    var viewPortHeight; 

    if (typeof window.innerWidth != 'undefined') { 
     viewPortWidth = window.innerWidth, 
     viewPortHeight = window.innerHeight 
    } 
    $('#footer').css('margin-top', viewPortHeight); 
    alert('You are now viewing in '+orientation+' mode.'); 
} 

// Execute the event handler function when the browser tells us the device has 
// changed orientation 

window.addEventListener('orientationchange', onOrientationChange, false); 

// Execute the same function on page load to set the initial <body> class 

onOrientationChange();

출처

2013-07-21 04:13:13 Ali

그래서 내가 이것을 실행하는 HTML에 물건을 올려해야합니까? 아니면 그냥 알림 ('+ 오리엔테이션 +'모드로보고 있습니다. '); resize 명령을 사용합니까? – Matthew

'$ ('# footer') .css ('margin-top', viewPortHeight);'바닥 글에 여백이 생기고 창 위쪽과 같은 높이가됩니다. 경고는 디버깅 목적으로 만 사용되었습니다. 이는 정확히 페이지 방향으로 바닥 글을 밀어 넣을 수 있기 때문에 원하는 내용이 아닐 수 있습니다. 대신 #container div의 최소 높이를 viewPortHeight로 설정할 수 있습니다. 또한이 솔루션에는 JQuery fyi가 필요합니다. – Ali

가로 모드와 세로 모드의 모바일 장치를 기반으로 요소의 높이를 변경하려면 어떻게해야합니까?

답변

관련 문제