摘要：
真心怕了移动端，系统设置是个硬性条件！关闭了屏幕旋转后，css媒体查询和js的orientation判断都将豪无用武之地！

一、起因

接了一个外包单子，需求是需要强制用户的手机处于横屏状态，然后还有播放器等功能。

本以为没什么难点，结果一试才发现，那叫个坑啊！而且不止一个！

不知道看官之前也接触过手机端屏幕强制横屏的问题，如果没有，可以看下艺灵的这篇文章，吸取下经验。

二、网上的利用css媒体查询法实现横屏

注意！如果看官在手机系统设置中关闭了屏幕旋转，那么媒体查询将被无视掉！

2.1、媒体查询

/*竖屏*/
@media screen and (orientation: portrait){
　body{background:#f00}
}
/*横屏*/
@media screen and (orientation: landscape){
　body{background:#000}
}

所以，如果如果想让上面的横屏代码，那就需要开启系统设置中的屏幕旋转功能。

三、js中的window.orientation判断横竖屏

前提条件还是一样。注意！如果看官在手机系统设置中关闭了屏幕旋转，那么媒体查询将被无视掉！

3.1、window.orientation

if(window.orientation==90||window.orientation==-90){
　console.log("横屏状态！")
}else if(window.orientation==0||window.orientation==180){
　console.log("竖屏状态！")
}

不管是直接用window.orientation还是用window.onorientationchange来监听，都别忘记了前面说的那个前提条件！

四、没救了吗？

如果用获取屏幕宽高度的方法，或许还有救。

4.1、获取屏幕尺寸

var width = document.documentElement.clientWidth;
var height =  document.documentElement.clientHeight;

获取后通过比较值的大小来判断手机是横屏还是竖屏。这个方法看起来是可行的，但是！如果看官此时再旋转一下屏幕(如果已开启屏幕旋转的话)，当旋转到横屏时，页面内容就跟着旋转了。如果此时再通过判断尺寸来调整的话，切换时还是有一个旋转的过程，感觉不是太完美。。。。。。

如果看官不信的话，可以用手机扫描下面的二维码一看究竟。

实例验证

另外，艺灵在网上也找了一些文章，有些文章中写到有利用一些造好的插件来实现横屏的功能，但经过测试，最终的结果是：这些插件都逃不过系统设置那一关！

噗......

所以最后，艺灵选择了放弃。如果看官可以解决上面的问题的话，欢迎私聊。有偿哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2017-06-16/547.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。