在PhoneGap/jQuery Mobile中支持不同的屏幕尺寸

Question

在PhoneGap/jQuery Mobile中支持不同的屏幕尺寸

javascriptjquerycsscordovajquery-mobile

4

在Android中，我们有layout_weight和layout_height来设置图像/布局的宽度和高度，因此当我们有不同的屏幕尺寸时，它会自动调整到我们指定的屏幕宽度和屏幕高度。

在PhoneGap/jQuery Mobile中是否有类似的东西？

我想在页眉和页脚之间放置一个图像。我尝试在CSS中添加页眉。但是，图像在页眉中重复，并且整个屏幕都可滚动，但我想在屏幕上固定一个图像，并且希望图像自动适应设备的屏幕大小。我是PhoneGap和jQuery Mobile的新手。

如何使图像在页眉和页脚之间固定，并自动调整为不同的屏幕尺寸？

这是HTML页面。

<div data-role="page" id="timer">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false" class="timerheader">
        <h1></h1>
     </div>
     <div data-role="content">
        <p><centre><img src="Image/timer.png" alt="" /></centre></p> 
     </div>
     <div data-role="footer" data-position="fixed" data-tap-toggle="false"   >
        <h3><a href="#" data-role="button" data-inline="true" ><img src="Image/Next.png"/></a></h3>
     </div>
</div>

谢谢：）

- Beginner

1

下次不要忘记添加jQuery Mobile标签，因为这是一个jQM问题，Phonegap只是一个应用程序包装器。 - Gajotres

2个回答

0

我知道其中一种解决方案。它并不完美，但非常有效。您可以为每个分辨率指定不同的CSS文件，并使用媒体查询。媒体查询将根据您可以指定的某些规则（例如屏幕分辨率）替换您的CSS代码。它与PhoneGap和jQM非常兼容。在这里检查并阅读官方w3文档。

希望能对您有所帮助。

- Piotr Krysiak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gajotres · Accepted Answer

这在jQuery Mobile中有些棘手，尽管页面宽度始终相同，但页面高度会因为页面事件的不同而变化。我不知道你对jQuery Mobile页面事件了解多少，简单来说，这些事件将发生在页面加载和页面转换期间（如果您想了解更多，请查看我的另一篇文章：jQuery Mobile：文档就绪与页面事件）。

现在让我们回到你的问题。jQM页面内容永远不会占据整个页面内容，除非已经有足够的内容填充它，而我们不能采用纯CSS方法使用100％宽度和100％高度。

为解决此问题，我们需要强制内容div占用完整的可用页面内容高度，并且可以通过以下函数完成：

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

我们将使用此函数在pageshow页面事件期间设置内容高度。并且图像将具有宽度100％和高度100％。

现在我们还需要修复图像CSS，以便其正确适合完整的内容高度：

html,body{height:100%;}

img {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow-y: hidden !important;
}

.ui-content {
    padding: 0 !important;
}

.ui-content img {  
    max-height: 100%;/* Part 1: Set a maxium relative to the parent */
    width: auto\9;
    /* IE7-8 need help adjusting responsive images */
    max-width: auto; 
    /* Part 2: Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

最后，这是一个有效的示例：http://jsfiddle.net/Gajotres/yndsW/ 编辑：看看我的另一种方法。我决定使用背景图像并让CSS处理居中。仅需要JavaScript来动态更改图像。

我们仍然需要JavaScript来修复页面高度。

HTML：

<div data-role="page" id="Windage">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3>Header</h3>
    </div>


    <div data-role="content">

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            <a href="#" data-role="button" data-inline="true" data-transition="slide">NEXT</a>
        </h3>
    </div>
</div>

CSS :

html,body{
    height:100%;
}

.ui-content {
    background-repeat:no-repeat;
    background-size:contain;  
    background-position: center center;
}

Javascript :

$(document).on('pageshow', '#Windage', function(){       
    $('[data-role="content"]').height(getRealContentHeight());
    $('.ui-content').css('background-image','url(Image/timer.png)');    
});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}