모바일 장치 전용 웹 사이트를 만들고 있습니다. 가로 모드에서 가장 잘 보이는 페이지가 하나 있습니다.
해당 페이지를 방문한 사용자가 세로 모드에서 페이지를보고 있는지 감지하고, 그렇다면 가로 모드에서 페이지를 가장 잘 볼 수 있다는 메시지를 표시합니까? 사용자가 가로 모드에서 이미보고있는 경우 메시지가 나타나지 않습니다.
기본적으로 사이트가 뷰포트 방향을 감지하고 방향이 세로 인 경우이 페이지가 가로 모드 에서 가장 잘 보인다는 경고 메시지를 표시 합니다.
답변
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}jQuery Mobile에는이 속성의 변경을 처리하는 이벤트가 있습니다. 누군가가 나중에 회전하면 경고하려면- orientationchange
또한 인터넷 검색 후 체크 아웃하십시오 window.orientation(도 단위로 측정된다고 생각합니다 …)
답변
window.matchMediaCSS 구문과 매우 유사하므로 사용하고 선호하는을 사용할 수도 있습니다 .
if (window.matchMedia("(orientation: portrait)").matches) {
// you're in PORTRAIT mode
}
if (window.matchMedia("(orientation: landscape)").matches) {
// you're in LANDSCAPE mode
}iPad 2에서 테스트되었습니다.
답변
David Walsh는 더 나은 지점 접근 방식을 가지고 있습니다.
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);이러한 변경 중에 window.orientation 속성이 변경 될 수 있습니다. 값이 0이면 세로보기를 의미하고, -90은 장치가 오른쪽으로 가로로 회전했음을 의미하고 90은 장치가 왼쪽으로 가로로 회전되었음을 의미합니다.
답변
CSS3을 사용할 수 있습니다 :
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}답변
예를 들어 몇 가지 방법이 있습니다.
- 검사
window.orientation값 - 비교
innerHeight대innerWidth
아래 방법 중 하나를 적용 할 수 있습니다.
기기가 세로 모드인지 확인
function isPortrait() {
return window.innerHeight > window.innerWidth;
}기기가 가로 모드인지 확인
function isLandscape() {
return (window.orientation === 90 || window.orientation === -90);
}사용법 예
if (isPortrait()) {
alert("This page is best viewed in landscape mode");
}방향 변경을 어떻게 감지합니까?
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
console.log(orientation);
});
});답변
데스크탑 컴퓨터에서 브라우저 창의 크기를 조정하면 가로 또는 세로가 될 수 있기 때문에 더 안정적인 솔루션은 창 대신 화면을 사용하는 것입니다.
if (screen.height > screen.width){
alert("Please use Landscape!");
}답변
이 모든 위대한 주석을 매일 코딩에 적용하기 위해 모든 응용 프로그램 간 연속성을 유지하기 위해 jquery 및 jquery 모바일 코드 모두에서 다음을 사용하기로 결정했습니다.
window.onresize = function (event) {
applyOrientation();
}
function applyOrientation() {
if (window.innerHeight > window.innerWidth) {
alert("You are now in portrait");
} else {
alert("You are now in landscape");
}
}