当我在Ipad / Ipad pro中使浏览器进入状态时，

元素的紫色边框不会显示。为什么？

相关代码：

<img src="RotateMobile.gif" alt="" id="rotateAnimation">
    <p id="rotateText">Please turn your device</p>

@media screen and (max-width:1024px) {
    @media screen and (orientation:portrait)
    {

        #rotateAnimation {
            width: 80vw;
            height: 60vh;
            display: block;
            margin: auto;
            position: relative;
            top: 30vh;
        }

        #rotateText {
            font-size: 300%;
            text-align: center;
            color: white;
            text-shadow: 2px 2px black;
            border-top: 3vh solid #D52C82;
            border-bottom: 3vh solid #D52C82;
            position: absolute;
            top: 0px;
            margin: 0;
        }
    }
}