使用自己的样式表在 JQuery mobile 中进行 CSS 定位
Posted
技术标签:
【中文标题】使用自己的样式表在 JQuery mobile 中进行 CSS 定位【英文标题】：CSS positioning in JQuery mobile with own stylesheet 【发布时间】：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;
似乎特别是元素的定位（应该像模拟器示例一样居中）。
我该如何解决这个问题？
【问题讨论】：
【参考方案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 上对其进行了测试，它按预期工作。
肯定有更好的解决方案，但这个解决方案对我有用。如果问题本身有更好的解决方案或解释，我还是想知道..
【讨论】：
以上是关于使用自己的样式表在 JQuery mobile 中进行 CSS 定位的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile 使用 Ajax .load() 后没有样式