使用自己的样式表在JQuery mobile中定位CSS

我在 JQuery mobile中编写了一个小应用程序,如果我在Chrome中使用iOS模拟器,该应用程序可以正常工作.

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

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

为了说明,我附上了同一页面的两个屏幕截图,一次在模拟器中,一次在iPad上.在这里,用户触摸蓝色圆圈并且文本发生变化(此交互在模拟器和iPad中都有效).

我已经阅读了几个similar个问题,但我无法弄清楚如何让它工作.我必须使用自定义元素,如带圆圈的触摸区域,并准确定位它们.为元素提供data-role = none属性并没有@L_450_10@这个问题.

由于有人建议加载样式表可能会有问题,这是我的< 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;
}

看起来好像它特别是元素的定位(它应该像模拟器示例中那样居中).

我怎样才能@L_450_10@这个问题？

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

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

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