在android中我们有layout_weight和layout_height来设置图像/布局的宽度和高度。所以当我们有不同的屏幕尺寸时，它会自动调整到我们指定的屏幕宽度和屏幕高度。
他们的东西在phonegap / jquery手机中是否与它类似？
我想要一个页眉和页脚以及两者之间的图像。 我尝试在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>谢谢：）
In android we have layout_weight and layout_height to set the width and height of an image/layout, So when we have different screen size it automatically adjust to the screen width and screen height which we have specified.
Is their anything similar to it in phonegap/jquery mobile?.
I want to have a header and footer and a image in between. I tried adding header in css. but the image is repeating in header and also the entire screen is scrollable but i want a fixed image in the screen and i want to make images to adjust automatically to screen size of the device. I am new to phonegap and jquery mobile.
How can i make image fixed in between header and footer and adjust automatically to different screen size?.
Here is html page
<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>Thanks:)
最满意答案
这在jQuery Mobile中有点棘手，而页面宽度总是相同的页面高度会因页面事件而异。 我不知道你对jQuery Mobile页面事件了解多少，为了简化故事，这些事件将在页面加载期间和页面转换期间发生（如果你想了解更多，请看看我的另一篇文章： jQuery移动：文档准备与页面事件 ）。
现在让我们回到你的问题。 jQM页面内容永远不会占用整页内容，除非已经有足够的内容填充它，我们不能采用100％宽度和100％高度的纯css方法。
要解决这个问题，我们需要强制内容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/
编辑：
看看我的另一种方法。 我没有使用img标签，而是决定使用背景图像并让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; }This is a little bit tricky in jQuery Mobile, while page width is always the same page height will vary from page event to page event. I don't know how much do you know about jQuery Mobile page events, to make story short those events will occur during to page load and during the page transitions (if you want to find out more take a look at my other article: jQuery Mobile: document ready vs page events).
Now lets get back to your question. jQM page content will never take full page content unless there's already enough content filling it and we cant take pure css approach with 100% width and 100 % height.
To solve this problem we need to force content div to take full available page content height, and it can be done with this function:
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; }We will use this function to set content height during the pageshow page event. And image will have width 100% and height 100%.
Now we also need to fix image css so it will properly fit full content height:
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; }And finally here's a working example: http://jsfiddle.net/Gajotres/yndsW/
EDIT :
Take a look at my another approach. Instead of using img tag I have decided to use background image and let css to handle centering. Javascript is only needed to dynamically change image.
We still need javascript to fix our page height.
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; }更多推荐
发布评论