Question

我正在制作一个适用于2个Android设备的应用程序，三星Galaxy标签s2和RuggedT T5表格。

我正在使用cordova，后者又使用html和css。我正在努力的是，一台设备上的1像素在另一台设备上不一样，这是一个已知问题，没有人对此有答案。

我处于幸运的境地，我只需支持已知的设备，因此可以进行静态更改，而不必做出一般情况。

我试过用纯css解决这个问题

@media only screen and (max-width:1000px){
    html{
        transform: scale(0.9,0.9);
        margin-top: -32px;
        margin-bottom: -32px;
        margin-left: -54px;
        margin-right: -53px;
    }
}

这非常有效，除非我正在使用OpenLayers进行地图支持。在这里，我使用了map.forEachFeatureAtPixel和一个不支持这种缩放形式的hitTolerance。

map.forEachFeatureAtPixel( evt.pixel, featureCallback , {hitTolerance:25} );

我的一个想法是检测应用程序运行的设备，然后缩放webview，但我无法找到实现此目的的方法。

任何有关如何解决这个问题的好主意的人。任何形式的解决方案都是受欢迎的（java，javascript，css，...）

Answer 1

经过一些研究后我发现CSS现在有变量。我接下来要做的是将比例乘以所有重要值。

这是不合理的解决方案，但它确实有效。

如果我的CSS必须定义比例，那么

在顶部。

:root {
    --device-scale: 1.0;
}
@media only screen and (max-width:1000px){
    :root {
        --device-scale: 0.9;
    }
}

其余的我不得不成倍增加。

#map{
    position: absolute;
    top: calc( 55px* var(--device-scale) );
    bottom: calc( 115px * var(--device-scale) );
    width: 100%;
    background-color: black;
}

如何将1 ccs cm定义为真实cm

1 个答案: