我计划做一个React非常灵敏的网站。为此,我目前包括外部样式表。但是我想只为那些支持viewport单位的浏览器(如vw)添加它。那么,我怎么能检测浏览器,它支持与否.请注意:我不想包括现代化。
wvyml7n51#
这是Modernizr使用的代码:
Modernizr
testStyles('#modernizr { width: 50vw; }', function(elem) { var width = parseInt(window.innerWidth / 2, 10); var compStyle = parseInt((window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle).width, 10); Modernizr.addTest('cssvwunit', compStyle == width); });
所以你可以做类似的事情。只要按照以下步骤:1.在vw中设置width的元素。1.检查元素的计算width是否与视口的宽度匹配。1.如果两者相同,那么您的浏览器支持vw和vh!
vw
width
vh
x一个一个一个一个x一个一个二个一个x一个一个三个一个我用IE 7检查了一下,它搞砸了! ;)
;)
y4ekin9u2#
在现代浏览器中,您可以在CSS中使用@supports来检查对各种事物的支持,包括视口单位。在@supports中 Package 您想要的任何样式,就像@media查询一样:
@supports
@media
@supports(height: 100vh) { .myClass { height: 100vh; } }
此示例测试浏览器是否支持vh或dvh之类的单位,或者madeup的不存在类型(即浏览器不知道的类型):x一个一个一个一个x一个一个二个x在JavaScript中,您可以按照与CSS.supports()相同的方式使用它:
dvh
madeup
CSS.supports()
const supportsDvh = CSS.supports('height: 100dvh');
2条答案
按热度按时间wvyml7n51#
这是
Modernizr
使用的代码:所以你可以做类似的事情。只要按照以下步骤:
1.在
vw
中设置width
的元素。1.检查元素的计算
width
是否与视口的宽度匹配。1.如果两者相同,那么您的浏览器支持
vw
和vh
!x一个一个一个一个x一个一个二个一个x一个一个三个一个
我用IE 7检查了一下,它搞砸了!
;)
y4ekin9u2#
在现代浏览器中,您可以在CSS中使用
@supports
来检查对各种事物的支持,包括视口单位。在
@supports
中 Package 您想要的任何样式,就像@media
查询一样:此示例测试浏览器是否支持
vh
或dvh
之类的单位,或者madeup
的不存在类型(即浏览器不知道的类型):x一个一个一个一个x一个一个二个x
在JavaScript中,您可以按照与
CSS.supports()
相同的方式使用它: