关于手机端横屏竖屏问题
废话不多说，直接上干货：
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. 汉子呢请正常上班时间找我，美女随意！
浙公网安备 33010602011771号