방향에 따라 뷰포트를 380x800 또는 800x380으로 설정하는 방법은 무엇입니까?

메타 태그 "뷰포트"를 사용하면 웹 사이트의 초기 눈금을 설정할 수 있지만 사용자가 장치의 방향을 뒤집으면 이상하게 나타날 수 있습니다.방향에 따라 뷰포트를 380x800 또는 800x380으로 설정하는 방법은 무엇입니까?

예를 들어, 눈금을 800x380로 설정하고 사용자가 세로 모드에서 웹 사이트를 열면이 눈금이 분명히 틀리며 90 ° 회전하면 웹 사이트가 1650와 비슷해집니다.

디바이스가 가로로 시작하면 800x380이고 처음에는 세로가 380x800 인 뷰포트를 어떻게 설정합니까?

출처

2012-04-17 Kae Verens

감사합니다. 그들 중 누구도 내가 물어 보려는 질문에 대답하지 않습니다. 가능한 모든 조합에 대해 별도의 시트를 제공하는 것이 바람직한 해결책을 설정할 수있는 경우에는이 경우 옳은 대답이 아닙니다. –

뷰포트를 HTML의 한 값으로 설정 한 다음 화면 크기가 변경된 경우 JavaScript를 사용하여 뷰포트를 업데이트하여이 문제를 직접 해결할 수있었습니다. 이제 자연스럽게 768x1368과 같은 화면에 제대로 표시되는 380x800 앱을 추가 스타일 시트로드를 필요로하지 않고/쓸 필요가 없습니다. –

Android에서 내 대답에 설명 된 방법을 사용하여 자동으로 기본 개발 앱을 확장 할 수 있습니다.이 경우 질문은 더 많은 웹 개발이며 안드로이드 태그를 휴대하지 않아야한다고 생각합니다.이 질문은 모바일 잠재 고객을 대상으로하는 모든 웹 개발에 적용되기 때문입니다. 모바일 장치의 브라우저에서 웹 사이트를 불러 와서 "앱"이 아닌 웹 사이트를 변경하려고합니다. 죄송합니다. 잘못된 것이면 많은 모바일 웹 개발자가 이와 같은 정보를 사용할 수 있기 때문에 제안하는 것이고 android 태그는 혼란 스럽습니다. –

는, 방향의 변화를 감지 창에 이벤트 리스너를 부착하려면 : 당신이 감지 할 수 updateOrientation를 기능에

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

여기

미디어 쿼리에 대한 문서입니다 장치가 어느 방향인지에 따라 뷰포트 속성을 재설정합니다.

function updateOrientation() { 
    if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) { 
    return; 
    } 

    var viewport = document.querySelector("meta[name=viewport]"); 

    switch (window.orientation) { 
    case 0: //portrait 
     //set the viewport attributes to whatever you want! 
     //For Ex : viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    case 90: case -90: //landscape 
     //set the viewport attributes to whatever you want! 
     break; 
    default: 
     //set the viewport attributes to whatever you want! 
     break; 
    } 
}

출처

2012-04-20 11:24:00

이것은 내가 얻으려고 노력하는 것에 가까운 대답이다, 나는 생각한다! 감사 –

이와 같이 응용 프로그램의 "비율"을 설정하면 안됩니다. 다양한 화면 밀도를 허용하는 단위를 사용하여 앱 규모를 독립적으로 만들려 노력해야합니다. "dp"를 단위로 사용하고 레이아웃을 배열하여 규모와 관계없이 이해하도록하십시오.

레이아웃을 안드로이드로 작성해야하는 방식은 나를 위해 플랫폼에서 개발할 때 더 어려운 측면 중 하나입니다. 죄송합니다. 기술적으로 대답은 아니지만 Android 기기가 여러 기기 (태블릿, 휴대 전화, 기타 기기)에서 실행되므로 밀도 독립 기기와 해상도 조정을위한 폴더 (고밀도, 중간 밀도, 및 저밀도 폴더를 포함 할 수 있습니다.)

그러나 시작시 onCreate() 또는 onResume()을 감지하고 리소스에서 적절한 레이아웃을로드 할 수 있습니다. 레이아웃을 모두 두 장씩 유지해야합니다 (하나는 가로 방향, 다른 하나는 세로 방향). 또한 레이아웃 변경을 트리거하도록 방향 변경을 구성해야합니다.

출처

2012-04-17 21:58:26

다른 화면 크기 및 방향에 대해 미디어 쿼리를 사용하십시오.

<html> 
     <head> 
     <meta name="viewport" content="width=device-width; height=device-height; user-scalable=no; initial-scale=1; /> 
     <link rel="stylesheet" href="main_portrait.css" type="text/css" media="all and (orientation:portrait)"> 
     <link rel="stylesheet" href="main_landscape.css" type="text/css" media="screen and (max-width:500px) and (orientation:landscape)"> 
     <link rel="stylesheet" href="main_landscape_big.css" type="text/css" media="screen and (min-width: 501px) and (orientation:landscape)"> 
     <script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script> 
     <script type="text/javascript" charset="utf-8" src="main.js"></script> 
     </head> 
     <body onload="init();"></body> 
    </html>

첫 번째 스타일 시트 링크는 세로 모드의 모든 기기에 적용됩니다.
두 번째 스타일 시트는 방향이 가로 일 때 최대 너비가 500px 인 기기에 적용됩니다.
이고 마지막 스타일 시트는 너비가 500px보다 큰 기기 및 방향 프리셋에 적용됩니다.

원하는 각 조합에 더 많은 스타일 시트를 추가 할 수 있습니다. W3C Media Queries
좋은 튜토리얼 : How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

출처

2012-04-19 07:17:54 Chemik

방향에 따라 뷰포트를 380x800 또는 800x380으로 설정하는 방법은 무엇입니까?

답변

관련 문제