- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
在 android 中,我们有 layout_weight 和 layout_height 来设置图像/布局的宽度和高度,所以当我们有不同的屏幕尺寸时,它会自动调整到我们指定的屏幕宽度和屏幕高度。
在 phonegap/jquery mobile 中它们有什么类似的东西吗?
我想要一个页眉和页脚以及中间的图像。我尝试在 css 中添加 header 。但图像在标题中重复出现,而且整个屏幕都是可滚动的,但我希望屏幕上有一个固定图像,并且我想让图像自动调整为设备的屏幕尺寸。我是 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>
谢谢:)
最佳答案
这在 jQuery Mobile 中有点棘手,而页面宽度始终相同页面高度会因页面事件而异。我不知道您对 jQuery Mobile 页面事件了解多少,简而言之,这些事件将在页面加载期间和页面转换期间发生(如果您想了解更多信息,请查看我的另一篇文章:<强> jQuery Mobile: document ready vs page events )。
现在让我们回到您的问题。 jQM 页面内容永远不会采用完整的页面内容,除非已经有足够的内容填充它,我们不能采用 100% 宽度和 100% 高度的纯 css 方法。
为了解决这个问题,我们需要强制 content 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;
}
关于javascript - 在 phonegap/jquery mobile 中支持不同的屏幕尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16393688/
我正在查看 DOOM 源代码,我找到了 this行。 void * Z_Malloc (int size, int tag, void *user)
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
我正从 Python 和 Numpy 转向 C++ 和 Eigen。 在 Python 中,我可以使用 .shape 属性获取 Numpy 数组/矩阵的形状(维度),如下所示: import nump
固定嵌入式YouTube视频的宽度并自己照顾自己的高度是否安全? 我有一个应用程序,用户可以将通知发布到公告板上。这些通知主要是文本(带有有限的html标签)和嵌入式图像。我现在要添加对嵌入式YouT
可以轻松创建一个 THREE.BoxGeometry,在创建宽度、高度和深度的三个独立参数时,您必须在其中传递参数。 我想创建任何和所有不带参数的THREE[types](),并在之后设置值。 有没有
我在 HTML 页面上有一个 Canvas : 属性width和height将 Canvas 拉伸(stretch)到某个字段,但不调整其大小。所以 var canvasElement = docu
我在我的 css 中使用 @media all 和 (max-width: 600px) {} 作为响应式菜单,问题是它没有正确显示。 我想让橙色填充绿色空间……当然,还要将绿色空间变成透明的。基本上
(我知道我问了很多关于这个的问题!) 基本上,我正在尝试将一些代码从 Matlab 转换为 C++,我遇到了这个: n = sum(size(blocks)) - len; 现在我计算了 vector
您好,我有一个用于创建产品的表单。用户应该能够选择类别(例如 T 恤),然后 T 恤的所有尺码(例如 S、M、L)都会下拉。用户可以输入每种尺寸的数量。 Javascript 对此不起作用。用户可以选
我正在尝试在页脚中定位和调整我的社交图标链接的大小,但是,这些命令似乎都没有效果,尤其是当我尝试调整它们的大小时。我试过将宽度和高度标记为“!重要”,但这也没有效果。 这是代码的 JSFiddle:h
我目前正在创建一个 HTML5 canvas基于绘图程序。用户可以绘制一张图像或几张图像“页面”,并将其保存到云端以供日后快速检索。这是用于交互式白板的;老师不能总是确定他们计划类(class)使用的
为网站存储图像的最佳方式是什么? 我不应该超过什么尺寸? 现在,我将所有界面文件保存在 png(主要是 Sprite )中,并将常用图像保存在 jpg 中。一些图像大约为 100-150Kb。 保存图
在 fancybox 主页 ( http://fancybox.net/home ) 中,有一个打开尺寸为屏幕 75% 的 iFrame 的示例。 我无法按照网站上的说明通过修改 .js 文件的宽度和
我想做一个仅适用于 iPhone 4 的应用程序,该应用程序使用 iAd AdBannerView。当我添加它时,它的固定大小为 320x50。在更高分辨率下这如何工作? 有人可以解释一下 iPhon
我们有一个 NSString,我们使用 - (NSSize)sizeWithAttributes:(NSDictionary *)attributes 来测量边界框。一切都好。 现在我们使用标准 NS
我想知道 Canvas 的宽度和高度,但我只知道它的 HDC。 我尝试过这段代码: procedure TForm92.Button1Click(Sender: TObject); var hBi
问题是如何使用数学从 START SVG 维度(不带旋转)和 END SVG 维度(带旋转)获取 >开始 SVG 信息。基本上,要从 START SVG 到 END SVG,我需要执行 -115.60
我的问题是,我有一个包含50万行的Oracle表。我设置了sqoop以将其作为 Parquet 文件导入到HDFS。我将--num-partition参数设置为32,得到了32个 Parquet 文件
是否可以更改 WordPress 中当前主题的 YouTube(或其他视频)的默认嵌入尺寸?我搜索了一个插件和一些代码,但似乎找不到。 我的意思是当您将 YouTube 网址粘贴到帖子或页面中时使用的
我有一个组,其中包含一个矩形和顶部的图像。我希望矩形可以调整大小,并且图像应该具有固定大小,除非矩形小于图像的情况。然后图像应该随着矩形缩小。 图像还应该始终居中并有一些填充。 除了图像的缩小尺寸部分
我是一名优秀的程序员,十分优秀!