Question

我是编程新手，我一直在使用“HTML5 for iOS和Android - 初学者指南”（http://html5formobile.com/）来教我创建HTML / JavaScript网页的基础知识，这是然后放入随本书提供的包装器，使页面作为Android应用程序运行。

我遇到的问题是，我试图将一段文本对齐到屏幕的水平中心，纯粹使用JavaScript。我在桌面PC上使用Chrome或IE查看时所编写的代码功能正常，但是一旦放入包装器中并且在我的手机上作为应用程序或在手机上查看的独立网页上查看，它就无法正常运行。以下是我创建的一小段代码：

<script>
    instruction_text_element = document.createElement("text");
    instruction_text_node = document.createTextNode('This text should be aligned to the horizontal center of the screen.');
    instruction_text_element.appendChild(instruction_text_node);
    document.body.appendChild(instruction_text_element);
    instruction_text_element.style.position = 'absolute';
    instruction_text_element.style.left = ((screen.width / 2) - (instruction_text_element.offsetWidth / 2)) + 'px';
</script>

在这段代码中，我计算屏幕的中点，然后从中减去文本元素宽度的一半，以创建放置文本元素的左侧位置，以便在上面看到等量的空白区域。文本的任何一方。如上所述，当我在使用Chrome或IE的台式PC上查看时，此功能正常。然而，一旦它被放置在app包装器中并在我的电脑上的真实电话或虚拟电话上查看，或者当我刚刚在手机上查看普通网页时，文本就不会出现在正确的中心位置 - 它是出现在屏幕左侧太远的地方，我会说左边大约25％。我的意思是文本每一边的空白区域应该是50/50但显示更像是25/75。

谁能告诉我为什么会这样？我很欣赏我的代码可能不是创建和调整文本的最佳方式，但我刚开始编程和学习基础知识，所以我希望知道我的代码中出现这种PC /移动差异的地方，所以我将来可以避免它，因为我对编程有了更多的了解。

非常感谢您提供的任何帮助！

干杯！

更新：

根据emrys57的建议，我尝试了以下示例，看看手机是否对屏幕宽度感到困惑：

<body>
<div id="div_id", style="width: 100px; background:#00CC33; text-align: center;">!</div>

<script>
document.getElementById("div_id").style.position = 'absolute';
document.getElementById("div_id").style.left = (window.innerWidth / 2) + 'px';
</script>

</body>

同样，这在我的台式机上工作正常，但在我的手机上，小绿色div框显示在屏幕左侧太远。我尝试交换screen.innerWidth的screen.width，但它产生相同的结果。将其换成window.outerWidth会导致框出现的位置更加偏向左侧。

有谁知道如何可靠地测量手机屏幕，或者它根本不可靠？

干杯！

Answer 1

当我尝试类似的技巧时，我发现某些手机/浏览器组合，尤其是较旧的组合，给出了屏幕尺寸的奇怪值。 iOS看起来很可预测，但Android却没有。要检查这一点，你可以尝试在屏幕中央放置一个固定大小的小div，其左手边缘，

little_box.style.left = (screen.width / 2) + 'px';

然后用尺子测量它。如果它不在中间，你就会知道手机对屏幕尺寸感到困惑。

我使用％的水平尺寸来克服这个问题。所有的手机似乎都很清楚 width: 50%; 装置

您可以通过将文本放在div中来更轻松地将文本对齐：

<div style="width: 100%; text-align: center;">!</div>

那个“！”应出现在屏幕中间。

JavaScript文本出现在手机的错误位置，但在PC网页上正确的位置

1 个答案: