在Chrome的移动模拟器中查看时，媒体查询无法用于SVG

Question

我在svg中使用嵌入式媒体查询。适用于窗口调整大小但不适用于在模拟器中查看。这是代码：

<div>
<svg width="4em" viewbox="0 0 30 42">
    <path id='drop' fill="#000" stroke="#000" stroke-width="1.5"
        d="M15 3
        Q16.5 6.8 25 18
        A12.8 12.8 0 1 1 5 18
        Q13.5 6.8 15 3z" />
    <style>
        @media screen and (max-width: 700px) {
            #drop {
                fill: green;
            }
        }
    </style>
    </svg>
</div>