使用自己的样式表在 JQuery mobile 中进行 CSS 定位答案

【问题标题】：CSS positioning in JQuery mobile with own stylesheet使用自己的样式表在 JQuery mobile 中进行 CSS 定位
【发布时间】：2015-11-10 05:07:10
【问题描述】：

我在 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;
}

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

我该如何解决这个问题？

【问题讨论】：

标签： jquery html ios css jquery-mobile

【解决方案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);
});

这将每 25 毫秒运行一次该函数，它可以按我的意愿工作。我已经在 iPad Mini 上对其进行了测试，它按预期工作。

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

【讨论】：