设置内容全屏幕没有溢出或使用jQuery移动滚动

我想创建一个使用jQuery Mobile的Web应用程序。我想要制作一个由4个按钮组成的导航页面，填满整个屏幕。设置内容全屏幕没有溢出或使用jQuery移动滚动

我使用下面的jQuery返回屏幕高度，将它除以4，然后将其应用于每个按钮。我重复这个方向上的变化...

var winHeight = window.innerHeight; 
var buttHeight = winHeight/4; 
var winWidth = $(window).width(); 

$('.fullWidthButton').css({ 
    height: buttHeight, 
    width: winWidth 
}); 

$('.ui-mobile-viewport').css({ 
    height: winHeight, 
    width: winWidth 
}); 
console.log(winHeight); 


$('#menu').bind("orientationchange", function() { 
    var winHeight = $(window).height(); 
    var buttHeight = winHeight/4; 
    var winWidth = $(window).width(); 

    $('.fullWidthButton').css({ 
     height: buttHeight, 
     width: winWidth 
    }); 

    $('.ui-mobile-viewport').css({ 
     height: winHeight, 
     width: winWidth 
    }); 

});

这里正在进行的web应用程序... http://mobile.graphitedesign.com/#menu

如果你认为这在iPhone上，你会发现，有证据显示，在微小的灰色背景当你滚动时底部 - 不是世界的尽头，但理想情况下，我想停止用户看到这一点，所有的时间都有菜单填满屏幕。

如果你旋转屏幕，jQuery做它的工作和调整按钮的高度，但现在有一个巨大的灰色背景。我试过一切，以消除这一点，但没有任何工作。

理想情况下，我想禁用完全滚动，但然后我失去了地址栏。

任何指针将不胜感激！

谢谢！

来源

2012-03-19 DanV

我应该在发布这个问题之前继续尝试另外5分钟......在上设置血腥的最小高度：300px。我覆盖了这一点，它解决了这个问题。任何改善这个提示都会很好。仍然在我的小白天！ – DanV 2012-03-19 23:18:21

你可以试试 “最小高度：25％;” ？

来源

2012-08-08 13:14:20

设置内容全屏幕没有溢出或使用jQuery移动滚动

回答

相关问题