Joe 's response has some good best practices in it, but I think the problem you'重新描述了Mobile Safari如果认为文本渲染得太小则自动缩放文本这一事实的中心 . 你可以使用CSS属性 -webkit-text-size-adjust 解决这个问题 . 以下是如何将此应用于您的身体的示例,仅适用于iPhone:
@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
6 回答
Joe 's response has some good best practices in it, but I think the problem you'重新描述了Mobile Safari如果认为文本渲染得太小则自动缩放文本这一事实的中心 . 你可以使用CSS属性
-webkit-text-size-adjust
解决这个问题 . 以下是如何将此应用于您的身体的示例,仅适用于iPhone:此外,请确保在视口元标记中将初始缩放设置设置为1:
Use 100% instead of None.
normalize.css包括这个
我不再使用像素定义,因为它们确实令人困惑,并且在视觉服务中并不完全相同 .
与单位见面
“Ems”(em):“em”是一个可扩展的单元,用于Web文档媒体 . em等于当前的字体大小,例如,如果文档的字体大小为12pt,则1em等于12pt . Ems本质上是可扩展的,因此2em等于24pt,.5em等于6pt等 . 由于可扩展性和移动设备友好性,Ems在Web文档中变得越来越流行 .
像素(px):像素是固定大小的单位,用于屏幕媒体(即在计算机屏幕上阅读) . 一个像素等于计算机屏幕上的一个点(屏幕分辨率的最小分度) . 许多网页设计师在网络文档中使用像素单元,以便在浏览器中呈现网站时生成像素完美的网站表示 . 像素单元的一个问题是它不会向视觉受损的阅读器向上扩展或向下扩展以适应移动设备 .
点(pt):传统上在打印介质中使用点(任何要在纸上打印的东西等) . 一点等于1/72英寸 . 点与像素非常相似,因为它们是固定大小的单位,不能缩放 .
百分比(%):百分比单位与“em”单位非常相似,除了一些基本差异 . 首先,当前的字体大小等于100%(即12pt = 100%) . 使用百分比单位时,您的文本仍可完全扩展到移动设备和可访问性 .
我有同样的问题,原来的CSS中有这条线:
-webkit-text-size-adjust:120%;
我不得不把它改成100%,一切都很顺利 . 无需将所有px更改为em或%% .
同时检查你是否没有为你正在操作的元素设置“宽度/高度”,Safari在svg中给出了字体大小的优先级,Chrome和FF目前至少没有 .