Em 字体大小未按比例放大 iOS
Em Font Sizes not Scaling Up in iOS
我过去已经正确地做到了这一点,但是我正在构建的这个新站点上的某些内容没有正确启动。
我的问题是,当以 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%。
知道我做错了什么吗?
有几件事需要考虑。
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">
作为标题 浏览器样式 sheet 并不总是那么容易覆盖。段落标签可以更改。
如果您使用 id 而不是 class ,它将获得更高的优先级,并且可能在所有浏览器中更加一致。
不知道为什么,但 FireFox 显示 reset.css 被加载了两次。
查看时间线瀑布,您有一些字体文件加载得很晚,并阻止了开始渲染。所有 CSS 和字体文件都应在任何 JS 之前加载,因为浏览器必须在加载时解析 JS,然后必须在加载新 CSS 或字体时重置初步布局。
注意第 18-23 行,然后在第 23 行之后 DOM 内容最终加载。
另一件奇怪的事情是相对较小的图像文件需要一秒钟的时间来加载。当您的服务器的 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 上的样子。不是真的,当它是实际大小时,很难阅读。缺乏高对比度也于事无补。
尝试将您当前的视口元标记更改为 <meta name="viewport" content="width=1080" />
如下:
<meta name="viewport" content="width=device-width, initial-scale=1">
我认为应该纠正这个问题;这是用于 iPhone 和其他设备的正常设置组合。
我过去已经正确地做到了这一点,但是我正在构建的这个新站点上的某些内容没有正确启动。
我的问题是,当以 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%。
知道我做错了什么吗?
有几件事需要考虑。
html.css style.css 和 reset.css.
reset.css 第 20 行指定 100%。
reset.css 第 70 行指定 13px。
html.css 第 180 行指定 1.17em。
在 FireFox 中,流行的是 style.css 第 54 行指定 2em.
指定 CSS 一次。考虑不使用 h3 而是
<p class="headline">
作为标题 浏览器样式 sheet 并不总是那么容易覆盖。段落标签可以更改。
如果您使用 id 而不是 class ,它将获得更高的优先级,并且可能在所有浏览器中更加一致。
不知道为什么,但 FireFox 显示 reset.css 被加载了两次。
查看时间线瀑布,您有一些字体文件加载得很晚,并阻止了开始渲染。所有 CSS 和字体文件都应在任何 JS 之前加载,因为浏览器必须在加载时解析 JS,然后必须在加载新 CSS 或字体时重置初步布局。
注意第 18-23 行,然后在第 23 行之后 DOM 内容最终加载。
另一件奇怪的事情是相对较小的图像文件需要一秒钟的时间来加载。当您的服务器的 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 上的样子。不是真的,当它是实际大小时,很难阅读。缺乏高对比度也于事无补。
尝试将您当前的视口元标记更改为 <meta name="viewport" content="width=1080" />
如下:
<meta name="viewport" content="width=device-width, initial-scale=1">
我认为应该纠正这个问题;这是用于 iPhone 和其他设备的正常设置组合。