如何将1 ccs cm定义为真正的cm

Question

我正在开发一款应用程序，可以在两款安卓设备上使用，一款是三星galaxy平板s2，另一款是平板RuggedT T5。

我使用的是cordova，而cordova使用html和css。我正在苦苦挣扎的是，一台设备上的1px在另一台设备上是不一样的，这是一个已知的问题，没有人知道这个问题的答案。

幸运的是，我只需要支持已知的设备，因此可以进行静态更改，而不必进行一般情况下的更改。

我试着用纯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} );

我的一个想法是检测应用程序运行在什么设备上，然后缩放网页视图，但我无法找到这样做的方法。

任何对如何解决这个问题有很好想法的人。欢迎任何形式的解决方案，(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;
}