<p> 元素的边框在 Ipad/Pro 设备中不显示为块元素

Question

当我在 Ipad / Ipad pro state 中设置浏览器时，

元素的紫色边框没有显示。为什么？

相关代码：

<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;
        }
    }
} 

对比

Answer 1

另外添加left:0；和 right:0；旋转文本，

#rotateText {
       left:0;
       right:0;
    }