移动端手机网页强制横屏或全屏模仿横评的js和css3方法_移动端网页版强制横屏实例

最近项目有电子合同方面的开发，需要电子签字，（用的jsignature插件，如果有空以后单独写个使用心得）。在手机小屏幕上签字，全屏横屏才是最好的体验。用户竖屏打开页面时要去签字，提示用户把手机横过来，这样体验太low了，程序员要考虑能用技术解决的就不要去劳烦用户（免得用户烦了回头打电话咬你）。

---

先来几个检测屏幕方向的方法：

//判断屏幕方向
if(window.orientation==90||window.orientation==-90){
    alert("横屏状态！")
}

//监听屏幕方向
window.onorientationchange = function(){ 
    switch(window.orientation){ 
        case -90: 
        case 90: 
            alert("横屏:" + window.orientation);
        case 0: 
        case 180: 
             alert("竖屏:" + window.orientation);
        break; 
    } 
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!--css媒介查询判断-->
@media (orientation: portrait) { } 竖屏 
@media (orientation: landscape) { } 横屏
1
2
3

进入网页检测是否横屏状态，不是就给canvas加样式：

transform: rotate(90deg);
1

最初想的是把jsignature的canvas画布用css3transform横过来就可以了，谁想到，画布横是过来了，touch相关的手势还是竖的（签字啊，笔画不跟手怎么签）。如果是普通项目仅仅是显示的话，上面的方法已经够用了。

还好这个项目是网页内嵌app中，app有方法强制网页横屏，改了改页面，交上去了。（插件横屏未解决，待续）

2019年3月18日更新：

目前没有找到可以支持这个想法的方法，所以不如转变下思路
现在手机屏幕越来越大，页面做横竖两版样式，竖的时候提示用户横屏签字效果更佳