移动端使用CSS或javascript判断横屏和竖屏的讲解 - 行业资讯

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。

首先在头脑中加入如下代码:

　　　　　　& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,最小规模=1.0,最大范围=1.0,user-scalable=不”/祝辞　　　　

<强>针对上述视窗标签有如下说明

1),内容中的宽度指的是虚拟窗口的宽度。

2), user-scalable=不就一定可以保证页面不可以缩放吗?不,有些浏览器不吃这一套,还有一招就是最小规模=1.0,最大范围=1.0最大与最小缩放比例都设为1.0就可以了。

3),初始=1.0初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=不,初始将无法生效。

4),手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

5),如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

<强>一:CSS判断横屏竖屏

写在同一个CSS中

　　　　　　@media屏幕和(方向:肖像){/*竖屏css */} 　　@media屏幕和(方向:景观){/*横屏css */} 　　　　

分开写在2个CSS中

竖屏　　　　　　& lt;链接rel="样式表“媒体=八泻?方向:肖像)“href=" https://www.yisu.com/zixun/portrait.css " rel=巴獠縩ofollow”在　　　　

横屏　　　　　　& lt;链接rel="样式表“媒体=八泻?方向:景观)“href=" https://www.yisu.com/zixun/landscape.css " rel=巴獠縩ofollow”在　　　　

<强>二,JS判断横屏竖屏

　　　　//判断手机横竖屏状态: 　　窗口。addEventListener (“onorientationchange”窗口& # 63;“orientationchange”:“调整”功能(){ 　　如果窗口。取向===180 | |窗口。取向===0){ 　　alert('竖屏状态!”); 　　} 　　如果窗口。取向===90 | |窗口。取向===-90){ 　　alert('横屏状态!”); 　　} 　　},假);//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。　　　　

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

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

　　　　//判断屏幕方向　　如果(window.orientation==90 | | window.orientation==-90) { 　　alert("横屏状态!”) 　　}//监听屏幕方向　　窗口。onorientationchange=function () { 　　开关(window.orientation) { 　　-90年情况: 　　90年情况: 　　alert("横屏:“+ window.orientation); 　　例0: 　　180年情况: 　　alert("竖屏:“+ window.orientation); 　　打破; 　　} 　　} 　　　　　　　　& lt; !——css媒介查询判断——比; 　　@media(方向:肖像){}横屏　　@media(方向:景观){}竖屏　　　　

进入网页检测是否横屏状态,不是就给画布加样式:

　　　　　　变换:旋转(90度), 　　　　

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

还好这个项目是网页内嵌的应用中,应用程序有方法强制网页横屏,改了改页面,交上去了。

<强>总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接