css3完美解决手机横竖屏判断

/* 判断手机横竖屏 */

@media screen and (orientation:portrait) {

/* css[竖向定义样式] */

#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

@media screen and (orientation:landscape) {

/* css[横向定义样式] */

#cover1{display: block;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: block;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

/* PC客户端或大屏幕设备: 1280px 至更大 */

@media only screen and (min-width: 1280px) {

#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}