gpt4 book ai didi

jquery - 使用自己的样式表在 JQuery Mobile 中定位 CSS

转载 作者:可可西里 更新时间:2023-11-01 06:14:11 25 4
gpt4 key购买 nike

我用 JQuery 移动版编写了一个小应用程序,如果我在 Chrome 中使用 iOS 模拟器,该应用程序可以正常运行。

如果我在 iPad Mini 上运行该应用程序,则似乎存在有关 css 样式的问题(JQuery 功能正常运行)。

具体来说,不显示标准 JQuery 样式表中的一些元素。

为了便于说明,我附上了同一页面的两个屏幕截图,一个在模拟器中,一个在 iPad 上。此处用户触摸蓝色圆圈,文本发生变化(此交互在模拟器和 iPad 中均有效)。

我读过一些 similar问题,但我不知道如何让它工作。我必须使用自定义元素(如带圆圈的触摸区域)并准确定位它们。给元素 data-role=none属性没有解决这个问题。

因为有人建议加载样式表可能有问题,这是我的<head>使用样式表和 jquery-mobile cdns。

<link rel="stylesheet" href="./theme/mobilecittheme.min.css" media="screen and (orientation: landscape)" />
<link rel="stylesheet" href="./theme/structure.css" />
<link rel="stylesheet" href="./MYSTYLESHEET.css" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

蓝色圈出的元素是:

<div id="target" data-role="none">Tap here to generate the control item</div>

屏幕截图中显示的元素的 css 是这样的:

#target {
border: blue 2px solid;
width: 25%;
height: 0;
padding-bottom: 25%;
position: fixed;
margin: 0;
margin-right: -50%;
transform: translate(-50%, -50%);
border-radius: 50%;
top: 65%;
left: 50%;
text-align: center;
}

好像特别是元素的定位(应该像模拟器例子一样居中)

我该如何解决这个问题?

iOS emulator iOS on iPad Mini

最佳答案

也许这可以帮助其他有类似问题的人:

在对样式表进行了一些试验之后,我现在找到了一个解决方案:

问题似乎出在元素的定位上,而反过来由于响应式居中而出现问题:

显然 CSS 中的响应居中是这样的

margin: 0;
margin-right: -50%;
transform: translate(-50%, -50%);

在 JQuery Mobile 中不起作用(知道这是为什么吗?)

我解决了这个问题并编写了一个以编程方式进行居中的 JQuery 函数:

function css_center(object) {
object.css({
"margin-left": -($(object).width() / 2),
"margin-top": -($(object).height() / 2)
});
}

(注意 margin-top 需要是 -($(object).width()/2 如果对象是响应式创建的正方形)

此函数需要在页面加载后调用:

$(document).on('pagecreate', '#pageID', function() {
css_center_square($("#target"));
});

但是,这也不起作用,因为该函数在开始时未被调用。我已经解决了这个问题:

$(document).on('pagecreate', '#pageID', function() {
setInterval(function(){
css_center_square($("#target"));
}, 25);
});

这每 25 毫秒运行一次该函数,它按我想要的方式工作。我已经在 iPad Mini 上对其进行了测试,它按预期工作。

肯定有更好的解决方案,但这个解决方案对我有用。如果问题本身有更好的解决方案或者解释,我还是很想知道..

关于jquery - 使用自己的样式表在 JQuery Mobile 中定位 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32052475/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com