移动端屏幕简单适配

CSS

<style>
        *{
            font-size: 1.2rem;
        }
        @media screen and (min-width: 1000px) {
            .ptag2::after{
                content: '您的屏幕超过1000像素'
            }
        }
        @media screen and (orientation: portrait) {
            /*竖屏 css*/
            .ptag::after{
                content: '竖屏样式'
            }
        }
        @media screen and (orientation: landscape) {
            /*横屏 css*/
            .ptag::after{
                content: '横屏样式'
            }
        }
    </style>
-------------------------------------------------
<body>
    <p class='ptag'></p>
    <p class='ptag2'></p>
</body>

JavaScript

(function(){
            var h = window.innerHeight;
            var w = window.innerWidth;
            console.log('h:'+h+',w:'+w);
            if(h>w)
                console.log('竖屏');
            else
                console.log('横屏');
            console.log(navigator.userAgent);
            if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)){
                console.log('移动端');
                var d =document.getElementsByClassName('ptag2')[0];
                d.innerHTML = d.innerHTML+'移动端<br>';
                
            }
            else{
                console.log('PC端');
                var d =document.getElementsByClassName('ptag2')[0];
                d.innerHTML = d.innerHTML+'PC端<br>';
            }
       })();