我用 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;
}
好像特别是元素的定位(应该像模拟器例子一样居中)
我该如何解决这个问题？
最佳答案
也许这可以帮助其他有类似问题的人:
在对样式表进行了一些试验之后，我现在找到了一个解决方案:
问题似乎出在元素的定位上，而反过来由于响应式居中而出现问题:
显然 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/