不同网站上类似大小的文本在我的 iPhone 上看起来不同

Question

我在http://readinglist.samselikoff.com/ 有一个简单的原型应用程序。

我正在设计仅用于移动设备的网站（这只是一个个人项目）。出于某种原因，当我在 iPhone 5 上拉起文字时，文字显示得非常小。

我制作了其他网站，它们的文字大小相似，但显示得更大。一种可能的解释是我使用了Ember.js，它将 DOM 元素包装在脚本标签中。

还有其他人在我的网站上遇到过这种情况吗？它在您的手机上看起来如何？例如，<h1> 标签是 48px。我检查过的其他使用类似字体大小（设备宽度

更新：这里是一些屏幕。前两个来自我桌面上的 Chrome，宽度为 480px：

这些来自我的 iPhone：

两个标题的文本都是 50 像素（当我从 Chrome 桌面检查时）。为什么我的 iPhone 上的“阅读列表”变得如此之小？

Answer 1

默认情况下，移动浏览器通过呈现更大的视口大小来伪装成桌面浏览器。具体尺寸因您的平台而异。您需要通过在 html 中添加 viewport 元标记来覆盖此行为。

<meta name="viewport" content="width=device-width,initial-scale=1" />

这是使用视口的好方法intro。

Answer 2

正确的浏览器实现会忽略脚本标签。它在 Chrome 和默认的 android 浏览器中显示正常，但我没有 Iphone 来测试它。系统文本大小是否与浏览器混淆？您可以尝试切换系统文本大小，看看它是否在浏览器中发生了变化。