最近项目有电子合同方面的开发,需要电子签字,(用的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;
}
}
<!--css媒介查询判断-->
@media (orientation: portrait) { } 竖屏
@media (orientation: landscape) { } 横屏
进入网页检测是否横屏状态,不是就给canvas加样式:
transform: rotate(90deg);
最初想的是把jsignature的canvas画布用css3transform横过来就可以了,谁想到,画布横是过来了,touch相关的手势还是竖的(签字啊,笔画不跟手怎么签)。如果是普通项目仅仅是显示的话,上面的方法已经够用了。
还好这个项目是网页内嵌app中,app有方法强制网页横屏,改了改页面,交上去了。(插件横屏未解决,待续)
2019年3月18日更新:
目前没有找到可以支持这个想法的方法,所以不如转变下思路
现在手机屏幕越来越大,页面做横竖两版样式,竖的时候提示用户横屏签字效果更佳