相关疑难解决方法(0)

是否有@media查询仅针对iOS运行设备？

例如:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

这也会改变这些宽度视角的Android设备页面的行为？或者我最后弄错了

我正在尝试使用-webkit-font-smoothingCSS属性控制谷歌浏览器(可怕的)字体抗锯齿,但它对文本完全没有影响.

<div style="font-size: 42px">
  <p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>

我比较了Photoshop中的像素,三者完全相同.Chrome不再支持此属性了吗？

我有一个具有以下 CSS 规则的文本元素：

box-sizing:border-box;
color:rgb(38, 38, 38);
display:block;
float:left;
font-family:Brandon, sans-serif;
font-size:14px;
font-weight:700;
height:20px;
line-height:16.8px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
text-align:left;
text-size-adjust:100%;
visibility:visible;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

我的问题是，虽然 Safari 上的渲染元素宽度在各个浏览器中相当恒定（在 146.50 像素到 150 像素之间），但与所有其他浏览器相比，它高达 165 像素，几乎多出 10%。由于我连续有几个元素，这种差异使得整个设计不适合 Safari...

我尝试过各种技巧，例如：- letter-spacing，word-spacing

这里建议的一切：Safari 字体渲染问题

但我找不到任何解决方案。我已经在以下环境中测试了该设计： - Firefox（Windows 和 Mac）、Internet Explorer、Edge、Chrome（Windows 和 Mac），结果或多或少是恒定的。Chrome Mac 与 Windows 的差异约为 1 像素。

Safari 使项目变得如此宽和更好的原因是什么？有没有办法在浏览器之间标准化它（当然不设置固定宽度）

编辑

@font-face {
 font-family: "Brandon";
 font-style: normal;
 font-weight: normal;
 src: url("../fonts/Brandon_reg.otf") format("opentype");
 }