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

Question

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

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

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

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

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

这些来自我的 iPhone：

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

Answer 1

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

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

这是使用视口的一个很好的介绍。

Answer 2

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