js 判断手机横竖屏

最新推荐文章于 2024-06-19 17:13:15 发布
最新推荐文章于 2024-06-19 17:13:15 发布
阅读量1k 收藏
点赞数
分类专栏： web前端 javascript笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_jiaxuan/article/details/47804831
版权

1.首先介绍下 css3得横竖屏判断

/*手机竖屏判断*/
@media all and (orientation: portrait){  }

/*手机横屏判断*/
@media all and (orientation:landscape){  }

在一般情况下，css3判断还是比较准确得。但是在特殊情况下，比如说在页面存在表单的情况，大家看下截图，一目了然（sorry，复现不了了，大家自行判断情况吧）


2.js搞定横竖屏判断

function orient() {
        if (window.orientation == 0 || window.orientation == 180) {
        $('#wrongLayer').hide();
        return false;
        }
        else if (window.orientation == 90 || window.orientation == -90) {
        $('#wrongLayer').show();
        return false;
        }
}
        $(window).bind('orientationchange', function(e){
            orient();
});


ok，上一下完整版代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>页面测试</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
        *{;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
        body,html{margin: 0px;padding: 0px;height: 100%;width: 100%;font-size: 62.5%}
        ul,li{padding: 0px;margin:0px;list-style: none}
        a{text-decoration: none}
        /*手机横屏样式*/
        .wrong-layer{
          position: fixed;
          display: none;
          background: #21313e;
          z-index: 99999;
          height: 100%;
          width: 100%;
          top:0px;
        }

        .abs-mm{
          position: absolute;
          left: 50%;
          top: 50%;
          text-align: center;
          -webkit-transform:translate(-50%, -50%);
        }

        .abs-mm .placeBlock-20{
          width: 100%;
          height: 20px;
          display: block;
        }


        /*验证码页面*/
        .didi-dilog{
          position: fixed;
          background:rgba(0,0,0,.5);
          height: 100%;
          width: 100%;
          z-index: 1;
          top: 0px;
          left: 0px;
        }

        .content_tel{
          background:#fff;
          border-radius:5px;
          width: 80%;
          position: relative;
          padding: 16px 0px 0px 0px;
          left: 50%;
          top: 50%;
          margin-left: -40%;
          margin-top: -107px;
          height: 214px;
          font-size: 1.2rem
        }

        .content-tips{
          margin-top: -102px;
          height: 204px;
        }


        .cont_ul{
          width: 80%;
          margin: 0px auto;
        }

        .cont_ul p{
          color: #333;
          text-align: center;
          font-size: 1.2rem
        }

        .cont_ul li.form{
          border: 1px solid #ccc;
          height: 40px;
          line-height: 40px;
          border-radius: 5px;
        }


        .cont_ul li input{
          width: 100%;
          font-size: 1.4rem;
          font-family: "";
          color: #7C7C7C;
          padding-left: 10px;
          border: 0px;
          outline: 0px;
        }

        ::-webkit-input-placeholder{
          color: #ccc
        }

        a.chose_btn {
          margin-top: 18px;
          background: #ff8a02;
          color: #fff;
          border-radius: 6px;
          font-size: 1.6rem;
          display: block;
          height: 40px;
          line-height: 40px;
          display: inline-block;
          text-align: center;
          width: 100%;
          z-index: 100;
          font-family: "黑体"
        }

        .li_phone{
          position: relative;
          margin-bottom: 10px;
        }
    </style>
</head>
<body>


    <!-- 横屏提示层 -->
    <div class="wrong-layer fullLayer" id="wrongLayer">
        <div class="abs-mm ta-c">
            <img src="http://static.xiaojukeji.com/pinche/images/subwaydog/wrong.png" style="width:74px;height:110px;">
            <br>
            <div class="placeBlock-20"></div>
            <span class="size14" style="color:#fff;font-size:1.4rem">为了更好的体验，请使用竖屏浏览</span>
        </div>
    </div>


     <script type="text/javascript">
       var fullLayer = document.querySelector('.fullLayer');
       if(window.innerHeight>window.innerWidth){
          fullLayer.style.height= window.innerWidth + "px";
       }else{
          fullLayer.style.height= window.innerHeight + "px";
       }
     </script>


    <!-- 验证码 -->
     <div class="content_tel">
         <ul class="cont_ul">
             <li><p>验证手机号,奖励才能找到你哦</p></li>
             <li class="li_phone form">
                <input type="tel" placeholder="填写手机号" id="phone" class="phone_i" maxlength="11">
             </li>
             <li class="form">
                <input type="tel" placeholder="输入验证码" id="code" class="valide_i"  maxlength="4">
             </li>
             <li>
                <a href="javascript:void(0);" class="chose_btn" id="chose_btn">确定</a>
                <!-- <p>奖励发送到手机号对应的滴滴账户</p> -->
             </li>
         </ul>
     </div>


<script src="http://1.jiaxuan.sinaapp.com/js/jquery.js"></script>
<script type="text/javascript">


     function orient() {
        if (window.orientation == 0 || window.orientation == 180) {
            $('#wrongLayer').hide();
            return false;
        }
        else if (window.orientation == 90 || window.orientation == -90) {
            $('#wrongLayer').show();
            return false;
        }
        }
     $(window).bind('orientationchange', function(e){
            orient();
     });
</script>   
</body>
</html>


闲音空梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JS判断移动端手机横竖屏状态
10-18
本文通过js和cas代码分别给大家介绍了移动端判断手机横竖屏状态的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
js判断手机浏览器是横屏or竖屏
weixin_34242819的博客
10-13 465
2019独角兽企业重金招聘Python工程师标准>>> ...
使用 JavaScript 控制屏幕方向
最新发布
gaotlantis的博客
06-19 317
在Web开发中，有时候我们希望能够通过JavaScript来控制网页的屏幕方向，例如在特定条件下锁定或更改屏幕方向。在现代浏览器中，这是可能的，但需要注意的是，并非所有浏览器都支持所有的功能。下面是如何使用JavaScript来控制屏幕方向的基本方法。
JS判断手机是否为横竖屏
star_29的博客
05-14 247
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { // alert('竖屏状态！'); } if (window.orientation === 90 || window.orientation === -90
js／css 检测移动设备方向的变化 判断横竖屏幕
weixin_33852020的博客
11-20 165
js／css 检测移动设备方向的变化 判断横竖屏幕 方法一：用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false); // 方法二：监听调整大小的改变 window...
js手机横竖屏判断
学习笔记666
11-16 576
在ipad/iphone开发中我们往往需要判断用户目前的屏幕的位置，这样加以优化显示应用内容。今天这里我们分享一个jQuery的代码，能够有效帮助大家判断横屏或者竖屏。注意这里调用了jQuery的方法，所以你需要引用jQuery类库。 function orient() { alert('gete'); if (window.orientation == 0 || window.orient
使用JavaScript判断手机浏览器是横屏还是竖屏问题
10-21
要使用JavaScript判断手机浏览器的横竖屏状态，可以利用`window.orientation`属性。这个属性返回一个整数值，表示设备的方向。在不同的设备和操作系统中，`window.orientation`的值可能会有所不同： - 当设备处于竖...
javascript判断iphone/android手机横竖屏模式的函数
10-28
在探讨JavaScript判断iPhone和Android手机横竖屏模式的函数时，我们首先要了解这两个设备平台在处理屏幕方向变化事件时的差异性。手机的横竖屏模式是移动应用开发中常见的功能需求，因为很多应用界面需要根据设备的...
html5手机端判断横屏竖屏页面展示模板
05-18
综上所述，这个HTML5手机端判断横屏竖屏页面展示模板通过JavaScript和CSS3实现了动态检测和适应手机屏幕方向的功能，使得页面内容能根据用户的操作习惯和设备状态自动调整，提供良好的用户体验。
用JavaScript判断横屏竖屏问题
ZHIYUANfL的博客
03-09 1312
/判断手机横竖屏状态：  function hengshuping(){    if(window.orientation==180||window.orientation==0){          alert("竖屏状态！")            }  if(window.orientation==90||window.orientation==-90){ 
手机判定横屏或是竖屏
09-27
js手机判定横屏或是竖屏 兼容各大浏览器等
js判断移动设备横屏竖屏状态
懒得安分的博客
01-10 1336
在移动WEB开发中，有些场景需要判断设备的横竖屏状态，在发现orientation方法之前我用的是获取设备的宽高来判断： //判断横竖屏 $(window).resize(() =&gt; { let w = $("body").width(); let h = $("body").height(); if (w &gt; h) { alert("横屏");...
js 判断横屏和竖屏
qq_45094682的博客
07-20 1300
前端判断手机竖屏或横屏、 用window.orientation方法获取屏幕旋转方向 window.addEventListener("resize", ()=>{ if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 console.log('竖屏'); }; if (window.orientation === 90 || window.o
js 横屏 竖屏 判断
weixin_33962923的博客
01-21 118
2019独角兽企业重金招聘Python工程师标准>>> ...
JS判断手机横竖屏
qq_40138785的博客
12-14 180
&lt;script type="text/javascript"&gt; $(function () { change(); }) window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", ch...
js 判断手机端横屏竖屏
xinbear的博客
04-24 1196
function acrossOrVertical() { if (window.orientation == 180 || window.orientation == 0) { alert("竖屏") } if (window.orientation == 90 || window.orientation == -90) { ...
js判断手机是否横屏，竖屏
weixin_30296405的博客
11-30 241
//判断手机横竖屏状态： function hengshuping() { if (window.orientation == 180 || window.orientation == 0) { alert("竖屏状态！") } if (window.orientation == 90 || window.orientation =...
使用JavaScript判断手机的横竖屏
mapbar_front的博客
09-20 979
横竖屏的需求由来横竖屏问题主要来源于移动端 iPhone、Android、以及 iPad这些设备中。有时候，我们的前端网页不仅要求在竖屏的情况下能够完美的展示，而且要求我们在横屏的情况下也有不错的网页展示效果。为了达到这个需求，就要求我们在不同情况下（横屏、竖屏）进行界面适配，通常是样式适配。横竖屏事件移动端的横竖屏事件是 orientationchange 事件。一般的使用方式是：window.a
js根据手机角度实现横屏竖屏
07-12
要根据手机角度实现横屏和竖屏切换，你可以使用JavaScript中的`window.orientation`属性和`window.addEventListener`方法来监听设备方向变化事件。以下是一个示例代码： ```javascript window.addEventListener('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值