不同网站上同样大小的文字在我的iPhone上看起来不同

Question

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

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

我已经制作了其他类似大小的文字，显示出更大的文字。一种可能的解释是我正在使用Ember.js将DOM元素包装在脚本标记中。

有其他人在我的网站上遇到此问题吗？它在您的手机上看起来如何？例如，<h1>标记为48px。我检查过的其他网站使用相似的字体大小（设备宽度<480px）在我的iPhone上看起来要大得多。可能是Ember，还是我错过了什么？

更新：这里有一些屏幕。前两个来自我桌面上的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来测试它。系统文本大小是否与浏览器混淆？您可以尝试切换系统文本大小，看看它是否在浏览器中发生了变化。