Em字体大小无法在iOS中扩大

最后发布: 2015-02-04 23:09:34


问题

我过去确实做得很好,但是我正在建立的这个新网站上的某些功能却无法正常使用。

我的问题是,当以iPhone纵向模式(我可以测试的版本为5)查看该网站时,字体大小确实很小。 它们没有相对于em尺寸扩大。 当我挤压桌面浏览器时,它可以正常工作(如左下图所示),但在iPhone上,该类型保持较小。

实时网站: http//debbiemillman.com/designmatters/totest/index.html

实时CSS: http//debbiemillman.com/designmatters/totest/_css/style.css

我也有-webkit-text-size-adjust:100%。

有什么想法我做错了吗?

在此处输入图片说明

ios css font-size
回答

尝试将您的视口元标记(目前以<meta name="viewport" content="width=1080" />更改为以下标记):

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

我认为应该纠正此事; 这是与iPhone和其他设备一起使用的设置的正常组合。


回答

有几件事情要考虑。
您在html.css style.css和reset.css中有h3冲突css。

reset.css第20行指定100%。
reset.css第70行指定13px。
html.css第180行指定1.17em。
在FireFox中,流行的是style.css第54行指定2em。

一次指定CSS。 考虑不使用h3而是
<p class="headline">
作为标题浏览器样式表并不总是那么容易覆盖。 段落标签被更改。

如果您使用ID而不是类,则会在所有浏览器中赋予更高的优先级,并且可能会更加一致。

不知道为什么,但是FireFox显示reset.css加载了两次。

看一下时间轴瀑布,您已经加载了一些字体文件,并且很晚才启动Start Render。 所有CSS和字体文件应在任何JS之前加载,因为浏览器必须在加载JS时解析JS,然后在每次加载新CSS或字体时必须重置初始布局。

注意第18-23行,然后紧接在23 DOM内容最终加载之后。

WebPageTest瀑布

另一个奇怪的事情是,相对较小的图像文件需要花费一秒钟的时间来加载。 当服务器的dta传输速度非常快时,这尤其奇怪。 而且jquery和script.js上的404错误不是很好。

Base Page Size: 20,029 Bytes
Transmission Speed: 11,506,849 Bytes/Sec.
Compression: 7.9X
HTML Whitespace: 37.3%
Bytes Transmitted: 2,520 Bytes
HTML Transfer Rate: 91,456,621 Bytes/Sec.

这就是WP 8.1的外观。 并非如此,当它是实际大小时,很难阅读。 缺乏高对比度没有帮助。

Win8.1手机

在此处输入图片说明