H5 豎屏顯示
阿新 • • 發佈：2021-06-17
1、在H5開發中，我們開發一個商城，是豎屏開發的，可能有某些使用者手機設定自動旋轉，
這個時候橫屏狀況下我們的商城 就容易產生樣式錯亂且格外的不好看，所以我們要在使用者手機為橫屏的狀況下給與使用者提醒，讓使用者在正常豎屏的情況下使用軟體，上程式碼index.html:
<body>
<!-- 提醒使用者豎屏 -->
<div id="mark">
<div class="mark-box">
<i class="icon-phone"></i>
<p class
2、接下來是css程式碼：
<style type="text/css"> /* 提醒使用者豎屏 */ #mark { position: fixed; width: 100vw; height: 100vh; background: #000000; display: none; } #mark .mark-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } #mark .icon-phone { display: block; margin: 0 auto; width: 67px; height: 109px; background: url(./img/shuping.png) no-repeat center center/cover; animation: ani-phone 1s ease-in-out infinite alternate; } /* 提醒使用者豎屏的動畫 */ @keyframes ani-phone { /* from {transform: rotate(0)} */ to { transform: rotate(90deg) } } #mark .message { color: #FFF; margin-top: 20px; letter-spacing: 0.5vw; } /* 當用戶橫屏的狀態下 注意：這裡的媒體查詢需要放在#mark的樣式下面，這樣才能進行覆蓋上面的樣式 */ @media only screen and (orientation:landscape) { #mark { display: block; } } </style>
3、同樣我們在瀏覽器先試一遍，效果圖如下： 橫屏狀態下提示使用者改為豎屏，豎屏狀態下正常顯示內容