css zoom 的兼容 |文字竖向拉长css

/* 使用 CSS zoom 属性，将元素放大为原来的 1.5 倍 */
.zoom {
zoom: 1.5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
}

上面的代码演示了如何使用 CSS zoom 属性将一个元素放大为原来的 1.5 倍。但是，兼容性需要大家格外关注。

对于 IE8 及以下版本浏览器，CSS zoom 属性可以正常支持。但是对于其他现代浏览器如 Chrome、Firefox，需要使用 -webkit-transform 或 -moz-transform 属性来兼容。而且，在使用非 IE 浏览器时，请务必在 CSS 中加入 zoom 属性，否则会出现兼容性问题。

如果需要在 iOS Safari 应用中使用，可以使用以下代码：

@media only screen and (max-device-width: 480px) {
.zoom {
zoom: 1.5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
}
}

上面的代码演示了如何使用媒体查询来控制在 iOS Safari 应用中使用三倍分辨率的情况下，保持元素的大小不变。但是，在 Android 微信浏览器上，会出现元素被拉伸的情况，需要手动调整 zoom 值。

综上所述，CSS zoom 属性不仅具有实用性，还需要认真处理兼容性问题才能得到最好的效果。