废话不多说,直接上干货:
css 方法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 横屏竖屏</title> <style type="text/css"> * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; list-style: none; } /* 横屏 */ @media all and (orientation : landscape) { .demo { color: red; } } /* 竖屏 */ @media all and (orientation : portrait) { .demo { color: blue; } } </style> </head> <body> <div class="demo">竖屏时候蓝色,横屏时候红色</div> </body> </html>
如果要把 head 里面的 style 提取到外部的 css 文件,横屏和竖屏直接写在一个 css 文件里面就好,不用写两个,然后 link 分别引入 横屏的 css 和竖屏的 css,这有点像脱裤子放屁,多次一举;
不过如果你要这样做的话也没事:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> ==>> 竖屏 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> ==>> 横屏
(分开引入本人是觉得多次一举,又或者是本人理解不到,请斧正!)
js 方法
"use strict"; // 监听手机屏幕是否改变
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", windowResize, false); // 页面初始化时候要先执行一遍, windowResize(); // 判断手机横竖屏状态: function windowResize(){ //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。 if (window.orientation === 180 || window.orientation === 0) { // alert('竖屏状态!'); } if (window.orientation === 90 || window.orientation === -90 ){ // alert('横屏状态!'); } }
如果是整个程序都支持横屏竖屏的话,那这个 js 建议放在一个公共的 js 里面,然后每个页面都要引入。当然这是保守做法,如果你是单页面的,只要在 index 里面引入一个就好,当然如果是前沿技术的话,说不定也有相关的处理方法了咧。
找到这的朋友赶紧拿代码跑跑看。拷走不谢。
好了,喜欢的朋友点点分享,喜欢的朋友点点关注。恩、么么哒。擦,我又不是主播,就酱!
有什么建议的交流的请加本人 QQ: 781599831. 汉子呢请正常上班时间找我,美女随意!