- style>
- @media screen and (orientation:portrait) {
- /* portrait-specific styles */
- }
- /* landscape */
- @media screen and (orientation:landscape) {
- /* landscape-specific styles */
- }
- </style>
-
- <script type="text/javascript">
- var mql = window.matchMedia("(orientation: portrait)");
- if(mql.matches) {
- alert("竖屏");
- } else {
- alert("横屏");
- }
- // 添加一个媒体查询改变监听者
- mql.addListener(function(m) {
- if(m.matches) {
- alert("竖屏");
- }
- else {
- alert("横屏");
- }
- });
- </script>