jQuery 모바일 페이지 변경 후 크기 조정

다른 것들 중에서 jquery 모바일을 사용하여 phonegap 응용 프로그램에서 일하고 있고 이전에 초기 페이지 및 방향 변경시 잘 작동하는 StackOverflow를 검색하는 솔루션을 발견했습니다.jQuery 모바일 페이지 변경 후 크기 조정

한 페이지에서 다른 페이지로 이동하면 문제가 발생합니다. 크기를 조정하는 것처럼 보이지만 너무 많이하는 경우,이를 해결하기 위해 할 수있는 것이 있는지 궁금합니다.

function contentHeight() { 
'use strict'; 
var screen = $.mobile.getScreenHeight(), 
    header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight(), 
    footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight(), 
    contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(), 
    content = screen - header - footer - contentCurrent; 

/* Apply calculation */ 
$(".ui-content").height(content); 
}

이것은 내가 여기 어딘가에서 제출 한 것으로 밝혀진 기능입니다.

$(window).bind('load resize orientationchange', contentHeight); 
$(document).ready(contentHeight); 
$(document).on('throttledresize orientationchange pagecontainertransition', contentHeight);

그리고이 내가 후킹있어 이벤트입니다. 당신이 먼저가 의도 한대로 작동 주 초기 웹 페이지를로드하지만 다른 웹 문서에 대한 링크를 클릭 언급 한 바와 같이

은 하단에 여분의 50-80px 높이를 추가합니다.

누구나 볼 수 있도록 CSS와 2 개의 HTML 파일을 첨부하겠습니다. 어떤 도움이나 통찰력에 미리

HTML File #1

HTML File #2

감사합니다! 내가 마지막으로 추가 된 일을 결국 무엇 주위에 많은 테스트, 후

출처

2016-06-08 Dixos

CSS 파일 : http://hastebin.com/zokaleceji.css – Dixos

두 번째 html 페이지에도 기능을 등록하셨습니까? 그렇지 않은 경우 작업하려면 두 번째 페이지에 등록해야합니다. 그러나 JQM 응용 프로그램을위한 두 개의 별도 html 파일을 만드는 것은 좋은 습관이 아닙니다. –

올바르게 이해하면 함수 자체가 전역이어야합니다. 함수에 console.log() 요소를 추가하여 상황을 확인하고 여러 페이지를 사용하는 경우에도 후속 페이지에 76 픽셀을 추가합니다. 단일 HTML 레이아웃 또는 여러 HTML 사용. – Dixos

: 메타 뷰포트 태그에

target-densityDpi=device-dpi

, 다음 : 바닥 글 자체에

data-position="fixed" 
data-id="myID" 
data-tap-toggle="false"

. 이는 선택 메뉴와 같은 모든 포커스 요소를 누를 때 튀어 오르는 고정 점뿐만 아니라 모든 방향 조정 문제를 해결했습니다 (방향 변경도 포함).

출처

2016-06-09 11:34:01 Dixos

jQuery 모바일 페이지 변경 후 크기 조정

답변

관련 문제