純CSS（media queries）實現移動端橫豎屏提示

囧囧發表於2015-10-17
CSS

在移動端的佈局開發中經常要考慮到橫豎屏所帶來的不同佈局， 但有時候我們只僅做了橫向或縱向佈局，為了更好的使用者體驗在沒有做佈局的頁面放一個提示會更加友好。網上有人寫了一些外掛來方便開發者一鍵新增，比如這篇部落格中提到的lanscape.js的小外掛就比較方便（文章連結：移動頁面橫豎屏切換提示） 但我看了下它的原始碼和實現方式覺得這麼一個小功能開銷有點大了， 這裡只需用到css中的media queries響應式佈局就可以很好的解決這個問題，關鍵點就在於css的media queries可以自動識別橫豎屏（它主要基於螢幕的寬高比來判斷，與移動端的window.orientation還是有區別的），這樣做還有一個用處，就是PC上瀏覽一般為landscape的佈局， 有些針對移動端的網頁在此也順便提示了使用者在移動裝置上瀏覽。
css media query的橫豎屏佈局：
豎屏（portrait）：

@media screen and (orientation:portrait)

橫屏（landscape）：

@media screen and (orientation:landscape)

邏輯是我們預先設定一個提示div， 預設顯示，在樣式中設定豎屏或橫屏隱藏，就實現了橫豎屏的提示了，沒demo說個p啊：
橫豎屏提示（在手機或模擬器上執行）
PS：直接點選連結，改變瀏覽器視窗寬度即可看到當寬度小於高度時即切換到content頁面

程式碼：
HTML

<div class="lock_wrp" id="lock">
        <div class="lock">
            <i></i><br>
            請使用移動終端豎屏瀏覽,體驗更佳
        </div>
    </div>
<div id="content">Content</div>

CSS：

@media screen and (orientation:portrait) {
.lock_wrp {
    display: none!important
}
}

@media screen and (orientation:landscape) {
#content {
    display: none!important
}
}
.lock_wrp {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background-color: #3c98d1;
    color: rgba(255,255,255,.8);
    z-index: 9999
}
.lock {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    height: 150px;
    margin: -75px 0 0 -125px;
    text-align: center
}
.lock i {
    position: relative;
    display: block;
    width: 74px;
    height: 110px;
    background: url(http://i11.tietuku.com/8f15d51b901bd922.png) 0 0 no-repeat;
    background-size: 100%;
    margin: 0 auto;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-animation: iphone 1.6s ease-in infinite;
    animation: iphone 1.6s ease-in infinite
}
@-webkit-keyframes iphone {
0% {
-webkit-transform:rotate(-90deg)
}
25% {
-webkit-transform:rotate(0deg)
}
50% {
-webkit-transform:rotate(0deg)
}
75% {
-webkit-transform:rotate(-90deg)
}
100% {
-webkit-transform:rotate(-90deg)
}
}
@keyframes iphone {
0% {
transform:rotate(-90deg)
}
25% {
transform:rotate(0deg)
}
50% {
transform:rotate(0deg)
}
75% {
transform:rotate(-90deg)
}
100% {
transform:rotate(-90deg)
}
}
#content{position: absolute;width:100%;height:100%;background:#3c98d1;overflow: hidden;
    left: 0;
    top: 0;color:white;}

另外在移動裝置中一般都會有window.orientation 判斷橫豎屏狀態的API，不過如果僅僅是做到提示功能，似乎並不需要JS的介入， 僅憑CSS就可以搞定了。

相關文章