当前位置：文江博客话题详情

HTML5 CSS3 Transform 横屏

h5页面怎么固定横屏且100%展示?

发布于 2022-09-06 02:49:59 字数 701 浏览 15 评论 0

1.需求是在h5页面上，固定横屏展示（不论用户怎么拿手机，始终横屏展示，强迫诱导用户横屏浏览）
2.demo源码
3.目前的问题：

手机横屏时，没有什么问题，可以正常展示
手机竖屏时，能够横屏，但是上下有留白，内容不是100%铺满

4.按照 @supreme 的回答，基本可以实现，但是出现了新的问题：

第一，在安卓手机里竖屏情况下，强制横屏，内容并没有展示完全，尤其是在微信里面，需要用户设置-通用-开启横屏，真正横屏才能看到全部内容
第二，在苹果手机里，开启手机的横屏模式下，可以正常显示，但是关闭之后，显示的内容还是不能100%全屏，依旧有留白

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

哆啦不做梦 2022-09-13 02:49:59

你复制过去看一下吧，好多方面的影响，我也不好跟你说：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>test2</title>
  <!-- <link rel="stylesheet" href="test2.less"> -->
  <style>
    html {
      font-size: 100px;
      margin: 0;
      padding: 0;
      font-family: '微软雅黑',Arial,Helvetica,'microsoft yahei',sans-serif;
      background: #f2f2f2
    }
    * {
        margin: 0;
        padding: 0
    }
    body {
        font-size: 12px;
        color: #333
    }
    .main {
        background-color: #999;
    }
    p {
        line-height: 30px;
        font-size: 16px
    }
    .title {
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        background-color: #fff
    }
    @media screen and (orientation: portrait) {
        .main {
            -webkit-transform:rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
             width: 100vh;
             height: 100vh;
             overflow: hidden;
        }
        
    }
    @media screen and (orientation: landscape) {
        .main {
            -webkit-transform:rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }
    }
  </style>
</head>
<body>
  <div class="main">
      <p class="title">test</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>2 2 2 2 2  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
      <p id="test"></p>
  </div>
  <script type="text/javascript" src="http://img3.fdc.com.cn/m/js/lib/zepto/zepto.min.js"></script>
  <script>
    var width_doc = document.documentElement.clientWidth;
    var height_doc =  document.documentElement.clientHeight; //文档流的高度
    var _width = screen.width;
    var _height =  screen.height; //屏幕的高度
    var orientationFun = function(){
    //  var width_doc = document.documentElement.clientWidth;
      // var height_doc =  document.documentElement.clientHeight; //文档流的高度
    //  var _width = screen.width;
      // var _height =  screen.height; //屏幕的高度
      if (window.orientation == 180 || window.orientation == 0) {
      // if(_width<_height){
        // alert('body宽高：('+width_doc+','+height_doc+')  print容器宽高：('+$('#print').width()+","+$('#print').height()+")");
        // $('.main').css({'transform': 'rotate(90deg)'});
        // $('.main').width(height_doc);
        // $('.main').height(width_doc);
        // // $('.main').offset({top:0});
        $('#test').html('body宽高：('+width_doc+','+height_doc+')  print容器宽高：('+$('.main').width()+","+$('.main').height()+")")
      // }else{
      }
      if (window.orientation == 90 || window.orientation == -90 ){
        // $('.main').css({'transform': 'rotate(0)'});
        // $('.main').width(_height);
        // $('.main').height(_width);
        // alert('body宽高：('+width_doc+','+height_doc+')  print容器宽高：('+$('#print').width()+","+$('#print').height()+")");
        $('#test').html('body宽高：('+width_doc+','+height_doc+')  print容器宽高：('+$('.main').width()+","+$('.main').height()+")")
      }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
      orientationFun();
    }, false);
    orientationFun();
    </script>
</body>
</html>

情场扛把子 2022-09-13 02:49:59

内容100%的问题已解决，把.main的overflow属性去掉，在微信里面试好的，但是浏览器中存在问题，再套一层dom就好了，具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>segmentfault</title>
  <!-- <link rel="stylesheet" href="test2.less"> -->
  <style>
    html {
      font-size: 100px;
      margin: 0;
      padding: 0;
      font-family: '微软雅黑',Arial,Helvetica,'microsoft yahei',sans-serif;
      background: #f2f2f2
    }
    * {
        margin: 0;
        padding: 0
    }
    body {
        margin: 0 auto;
        font-size: 12px;
        color: #333
    }
    .main {
        /*background-color: #999;*/
    }
    .main_second{
         background-color: #999;
         height: 100%;
         overflow: auto;
    }
    p {
        line-height: 30px;
        font-size: 16px
    }
    .title {
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        background-color: #fff
    }
    @media screen and (orientation: portrait) {
        .main {
            -webkit-transform:rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
            width: 100vh;
            height: 100vh;
            /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
            overflow: hidden;
        }
        
    }
    @media screen and (orientation: landscape) {
        .main {
            -webkit-transform:rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }
    }
  </style>
</head>
<body>
  <div class="main">
      <div class="main_second">
      <p class="title">我要强制横屏，100%平铺</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
       <p>2 2 2 2 2  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.
      </p>
      <p id="test"></p>
    </div>
  </div>
</body>
</html>```

茶底世界 2022-09-13 02:49:59

参考此文：https://aotu.io/notes/2017/10...

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文