移动端使用CSS或JS判断横屏和竖屏的讲解

时间：2022-11-18

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

首先在head中加入如下代码：


<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

针对上述viewport标签有如下说明

1)、content中的width指的是虚拟窗口的宽度。

2)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

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

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

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

一：CSS判断横屏竖屏

写在同一个CSS中


@media screen and (orientation: portrait) {
 /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
 /*横屏 css*/
}

分开写在2个CSS中

竖屏


<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >

横屏


<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >

二、JS判断横屏竖屏


//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
      alert('竖屏状态！');
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
      alert('横屏状态！');
    } 
  }, false); 
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

最近项目有电子合同方面的开发，需要电子签字，（用的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有方法强制网页横屏，改了改页面，交上去了。

总结

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

上一篇：Android开发之TabHost选项卡及相关疑难解决方法 下一篇：Flutter实战之自定义日志打印组件详解

移动端使用CSS或JS判断横屏和竖屏的讲解

相关文章

最新文章