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（）元素以查看正在發生的事情，並且無論您是使用多頁單個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手機頁面變化後不調整大小

回答

相關問題