我在http://readinglist.samselikoff.com/处有一个简单的原型应用程序。
我正在设计仅限移动设备的网站(这只是一个个人项目)。出于某种原因,当我在iPhone 5上启动时,文本显示的非常小。
我已经制作了其他类似大小的文字,显示出更大的文字。一种可能的解释是我正在使用Ember.js将DOM元素包装在脚本标记中。
有其他人在我的网站上遇到此问题吗?它在您的手机上看起来如何?例如,<h1>
标记为48px。我检查过的其他网站使用相似的字体大小(设备宽度<480px)在我的iPhone上看起来要大得多。可能是Ember,还是我错过了什么?
更新:这里有一些屏幕。前两个来自我桌面上的Chrome,宽度为480px:
这些来自我的iPhone:
两个标题的文字都是50像素(当我从Chrome桌面检查时)。为什么“阅读清单”在我的iPhone上变得如此之小?
答案 0 :(得分:2)
默认情况下,移动浏览器通过以较大的视口大小呈现来假装为桌面浏览器。具体尺寸因您的平台而异。您需要通过向html添加viewport
元标记来覆盖此行为。
<meta name="viewport" content="width=device-width,initial-scale=1" />
使用视口时,这是一个很好的intro。
答案 1 :(得分:1)
正确的浏览器实现会忽略脚本标记。它在Chrome和默认的Android浏览器中显示正常,但我没有Iphone来测试它。系统文本大小是否与浏览器混淆?您可以尝试切换系统文本大小,看看它是否在浏览器中发生了变化。