<small id='n9Ivx'></small><noframes id='n9Ivx'>

  • <tfoot id='n9Ivx'></tfoot>

    1. <i id='n9Ivx'><tr id='n9Ivx'><dt id='n9Ivx'><q id='n9Ivx'><span id='n9Ivx'><b id='n9Ivx'><form id='n9Ivx'><ins id='n9Ivx'></ins><ul id='n9Ivx'></ul><sub id='n9Ivx'></sub></form><legend id='n9Ivx'></legend><bdo id='n9Ivx'><pre id='n9Ivx'><center id='n9Ivx'></center></pre></bdo></b><th id='n9Ivx'></th></span></q></dt></tr></i><div id='n9Ivx'><tfoot id='n9Ivx'></tfoot><dl id='n9Ivx'><fieldset id='n9Ivx'></fieldset></dl></div>
      1. <legend id='n9Ivx'><style id='n9Ivx'><dir id='n9Ivx'><q id='n9Ivx'></q></dir></style></legend>
          <bdo id='n9Ivx'></bdo><ul id='n9Ivx'></ul>

        JavaScript实现移动端横竖屏检测

        时间:2023-12-14
        <tfoot id='NpirF'></tfoot>

          <i id='NpirF'><tr id='NpirF'><dt id='NpirF'><q id='NpirF'><span id='NpirF'><b id='NpirF'><form id='NpirF'><ins id='NpirF'></ins><ul id='NpirF'></ul><sub id='NpirF'></sub></form><legend id='NpirF'></legend><bdo id='NpirF'><pre id='NpirF'><center id='NpirF'></center></pre></bdo></b><th id='NpirF'></th></span></q></dt></tr></i><div id='NpirF'><tfoot id='NpirF'></tfoot><dl id='NpirF'><fieldset id='NpirF'></fieldset></dl></div>

          <small id='NpirF'></small><noframes id='NpirF'>

            1. <legend id='NpirF'><style id='NpirF'><dir id='NpirF'><q id='NpirF'></q></dir></style></legend>

                  <bdo id='NpirF'></bdo><ul id='NpirF'></ul>

                    <tbody id='NpirF'></tbody>

                  下面就给您讲解一下JavaScript实现移动端横竖屏检测的完整攻略:

                  步骤一:获取屏幕高宽

                  使用JS获取屏幕高宽的方式如下:

                  var screenWidth = window.innerWidth; // 获取屏幕宽度,不包含滚动条
                  var screenHeight = window.innerHeight; // 获取屏幕高度,不包含地址栏
                  var screenAvailWidth = window.screen.availWidth; // 获取屏幕可用宽度,包含滚动条
                  var screenAvailHeight = window.screen.availHeight; // 获取屏幕可用高度,包含地址栏
                  

                  步骤二:判断横竖屏

                  通过监听orientationchange事件(移动端浏览器横竖屏切换时会触发此事件)来判断当前横竖屏状态。代码示例如下:

                  window.addEventListener('orientationchange', function () {
                      if (window.orientation == 180 || window.orientation == 0) {
                          // 竖屏状态
                      }
                      if (window.orientation == 90 || window.orientation == -90) {
                          // 横屏状态
                      }
                  });
                  

                  此处需要注意的是,在某些移动端浏览器中,可能不支持orientationchange事件,此时我们需要使用resize事件来代替,代码如下:

                  window.addEventListener('resize', function () {
                      if (screenWidth < screenHeight) {
                          // 竖屏状态
                      } else {
                          // 横屏状态
                      }
                  });
                  

                  示例一:设置横竖屏样式

                  当用户使用移动设备横竖屏切换时,我们可能需要改变页面UI样式,例如:竖屏时页面宽度相对较小,应将字体缩小,调整布局等;横屏时页面宽度相对较大,应将字体增大,调整布局等。

                  实现示例如下:

                  window.addEventListener('orientationchange', function () {
                      if (window.orientation == 180 || window.orientation == 0) {
                          // 竖屏状态
                          document.getElementById('viewport').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no');
                          document.getElementById('container').style.width = '90%';
                          document.getElementById('container').style.margin = '0 auto';
                          // 其他适配操作
                      }
                      if (window.orientation == 90 || window.orientation == -90) {
                          // 横屏状态
                          document.getElementById('viewport').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no');
                          document.getElementById('container').style.width = '100%';
                          document.getElementById('container').style.margin = '0 auto';
                          // 其他适配操作
                      }
                  });
                  

                  在此示例中,我们监听了orientationchange事件,并根据屏幕横竖状态调整了页面字体大小、布局等样式。

                  示例二:禁止横屏

                  有些场景下,为了更好的用户体验,我们需要禁止用户在横屏状态下浏览网页。此时,我们可以通过监听orientationchange事件或resize事件,判断横竖屏状态,如果屏幕为横屏状态,则强制将页面旋转至竖屏状态。

                  实现示例如下:

                  function restrictLandscape() {
                      if (window.orientation == 90 || window.orientation == -90) {
                          // 屏幕为横屏状态
                          var body = document.getElementsByTagName('body')[0];
                          body.style.transform = "rotate(90deg)";
                          body.style.transformOrigin = "50% 50%";
                          body.style.width = "100%";
                          body.style.height = "100%";
                          body.style.position = "absolute";
                          body.style.top = "0";
                          body.style.left = "0";
                          body.style.overflow = "hidden";
                      } else {
                          // 屏幕为竖屏状态
                          var body = document.getElementsByTagName('body')[0];
                          body.style.transform = "rotate(0deg)";
                          body.style.transformOrigin = "50% 50%";
                          body.style.width = "auto";
                          body.style.height = "auto";
                          body.style.position = "static";
                          body.style.top = "auto";
                          body.style.left = "auto";
                          body.style.overflow = "auto";
                      }
                  }
                  window.addEventListener('orientationchange', function () {
                      restrictLandscape();
                  });
                  window.addEventListener('resize', function() {
                      restrictLandscape();
                  });
                  

                  在此示例中,我们通过transform属性控制了页面的旋转角度,使页面能够随屏幕横竖屏状态自适应,保证用户在竖屏状态下浏览页面。

                  以上就是JavaScript实现移动端横竖屏检测的完整攻略,包括获取屏幕高宽和判断横竖屏状态两个步骤,关键代码以示例的形式给出,方便开发者参考和使用。

                  上一篇:angularjs实现时间轴效果的示例代码 下一篇:网站性能优化之CSS无图片技术

                  相关文章

                • <i id='PFrrC'><tr id='PFrrC'><dt id='PFrrC'><q id='PFrrC'><span id='PFrrC'><b id='PFrrC'><form id='PFrrC'><ins id='PFrrC'></ins><ul id='PFrrC'></ul><sub id='PFrrC'></sub></form><legend id='PFrrC'></legend><bdo id='PFrrC'><pre id='PFrrC'><center id='PFrrC'></center></pre></bdo></b><th id='PFrrC'></th></span></q></dt></tr></i><div id='PFrrC'><tfoot id='PFrrC'></tfoot><dl id='PFrrC'><fieldset id='PFrrC'></fieldset></dl></div>

                  1. <tfoot id='PFrrC'></tfoot>
                      <bdo id='PFrrC'></bdo><ul id='PFrrC'></ul>

                    <small id='PFrrC'></small><noframes id='PFrrC'>

                    1. <legend id='PFrrC'><style id='PFrrC'><dir id='PFrrC'><q id='PFrrC'></q></dir></style></legend>