0

我是编程新手，我一直在使用“HTML5 for iOS and Android - A Beginner's Guide”（http://html5formobile.com/）一书来教我创建 HTML/JavaScript 网页的基础知识，即然后放入随书提供的包装器中，以使页面具有 Android 应用程序的功能。

我遇到的问题是，我试图将一段文本与屏幕的水平中心对齐，纯粹使用 JavaScript。我编写的代码在我的台式电脑上使用 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 上查看它时，它运行良好。但是，一旦将其放置在应用程序包装器中并在我的电脑上的真实手机或虚拟手机上查看，或者实际上只是在我的手机上查看纯网页时，文本不会出现在正确的中心位置 - 它是出现在屏幕左侧太远，我会说大约 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.width 换成 window.innerWidth 但它产生了相同的结果。将它换成 window.outerWidth 会导致框出现在更靠左的位置。

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

干杯!

4

1 回答 1

0

当我尝试类似的技巧时，我发现一些手机/浏览器组合，尤其是旧的组合，会给出奇怪的屏幕尺寸值。iOS 似乎大多是可预测的，但 Android 不是。要检查这一点，您可以尝试放置一个固定大小的小 div，其左边缘位于屏幕中央，

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

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

我使用 % 中的水平尺寸来克服这个问题。所有的手机似乎都知道什么 width: 50%; 意思。

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

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

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

于 2013-09-20T10:37:26.433 回答