Question

我在JQuery mobile中编写了一个小应用程序，如果我在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;
}

似乎特别是元素的定位（它应该像模拟器示例中那样居中）。

我该如何解决这个问题？

Answer 1

也许这有助于其他有类似问题的人：

我在尝试使用样式表后找到了解决方法：

问题似乎在于元素的定位反过来因为响应中心而存在问题：

显然，像这样的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);
});

这每25ms运行一次这个功能，它可以按我的意愿运行。我已经在iPad Mini上对它进行了测试，它按预期工作。

肯定有更好的解决方案，但是这个解决方案适用于我。如果对问题本身有更好的解决方案或解释，我仍然想知道..

使用自己的样式表

1 个答案: