精华内容
下载资源
问答
  • h5在手机怎么显示全屏
    2019-10-01 20:55:00

    解决方案1:

    设置如下:
    html,body{

    min-height:100vh;
    background-color:#fff;

    }
    这样高度首先不会写死,而且满足最小高度是满屏

    解决方案2:

    可以用vh和vw来布局。100vh和100vw就是你设备的高度和宽度。先把外面盒子固定下来,所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白。像你这种盒子比较少的可以用js获取设备的高度和宽度,然后用js设置盒子的高度,加起来等于你设备的高度就可以了。字体大小用rem表示。相对于根字体的大小。这是移动端布局的一些做法。

    解决方案3:

     

    html,body {
        width:100%;
        height:100%;
    }
    body {
        padding: 0;
        margin: 0;
    }

     

    解决方案4:

     

    *{
        padding: 0;
        margin: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
    }

     


    以上介绍了“ (css)H5页面内容较少时如何让页面全屏在手机显示呢?”的问题解答,希望对有需要的网友有所帮助。
    本文网址链接:http://www.codes51.com/itwd/4444477.html

    转载于:https://www.cnblogs.com/luodiandian/p/7523440.html

    更多相关内容
  • h5页面实现浏览器全屏显示

    千次阅读 2021-05-20 14:33:47
    开启全屏显示 退出全屏显示 获取当前是否全屏状态 开启全屏显示 let el = document.documentElement; // 不同浏览器兼容方法调用 if(el.requestFullScreen){ el.requestFullScreen(); }else if(el....

    目录

    开启全屏显示

    退出全屏显示

    获取当前是否全屏状态


    开启全屏显示

    let el = document.documentElement;
    // 不同浏览器兼容方法调用
    if(el.requestFullScreen){
      el.requestFullScreen();
    }else if(el.webkitRequestFullScreen){
      el.webkitRequestFullScreen();
    }else if(el.mozRequestFullScreen){
      el.mozRequestFullScreen();
    }else if(el.msRequestFullScreen){
      el.msRequestFullScreen();
    }
    
    

    退出全屏显示

    if (document.exitFullscreen) {
       document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
       document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.msCancelFullScreen) {
      document.msCancelFullScreen();
    }
    

    获取当前是否全屏状态

    if(document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){
       alert('当前是全屏')
    }else{
       alert('当前非全屏')
    }

     

    展开全文
  • 萌狼蓝天 伴姬一生 全屏显示 取消全屏 是否全屏 各类浏览器全屏的方法 一般浏览器 使用requestFullscreen()和exitFullscreen()来实现 早期版本Chrome浏览器 基于WebKit内核的浏览器需要添加webkit前缀,使用...

    image-20220312151938595

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>萌狼蓝天 伴姬一生</title>
    </head>
    
    <body>
        <div>
            <img src="./source/img/dog.jpg" height="300" alt="">
            <button id="full">全屏显示</button>
            <button id="cancelFull">取消全屏</button>
            <button id="isFull">是否全屏</button>
            <p id="tip" style="color:blue"></p>
        </div>
        <script>
            //全屏显示
            var div = document.querySelector('div');
            document.querySelector('#full').onclick = function () {
                if (div.requestFullscreen) {
                    div.requestFullscreen(); // 正常浏览器 
                } else if (div.webkitRequestFullScreen) {
                    div.webkitRequestFullScreen(); // webkit 
                } else if (div.mozRequestFullScreen) {
                    div.mozRequestFullScreen(); //早期火狐浏览器
                } else if (div.oRequestFullScreen) {
                    div.oRequestFullScreen(); //早期Opera浏览器
                } else if (div.msRequestFullscreen) {
                    div.msRequestFullscreen(); //早期IE浏览器
                } else {
                    alert('暂不支持在您的浏览器中全屏');
                }
            };
            //取消全屏显示
            document.querySelector('#cancelFull').onclick = function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen(); // 正常浏览器 
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen(); // webkit 
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen(); //早期火狐浏览器
                } else if (document.oCancelFullScreen) {
                    document.oCancelFullScreen(); //早期Opera浏览器
                } else if (document.msCancelFullscreen) {
                    document.msCancelFullscreen(); //早期IE浏览器
                } else {
                    alert('暂不支持在您的浏览器中全屏');
                }
                //可以用document,也可以用上方设置的变量 div
            };
            //检测当前是否处于全屏状态
            document.querySelector('#isFull').onclick = function () {
                // alert(document.webkitIsFullScreen); // webkit
                // 使用上面的弹窗方式。如果是处于全屏状态,会自动退出
                document.getElementById('tip').innerHTML=document.webkitIsFullScreen;
            };
        
        </script>
    </body>
    
    </html>

    各类浏览器全屏的方法

    一般浏览器

    使用requestFullscreen()exitFullscreen()来实现

    早期版本Chrome浏览器

    基于WebKit内核的浏览器需要添加webkit前缀,使用webkitRequestFullScreen()webkitCancelFullScreen()来实现。

    早期版本IE浏览器

    基于Trident内核的浏览器需要添加ms前缀,使用msRequestFullscreen()msExitFullscreen()来实现,注意方法里的screen的s为小写形式。

    早期版本火狐浏览器

    基于Gecko内核的浏览器需要添加moz前缀,使用mozRequestFullScreen()mozCancelFullScreen()来实现。

    早期版本Opera浏览器

    Opera浏览器需要添加o前缀,使用oRequestFullScreen()oCancelFullScreen()来实现。

    展开全文
  • 最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。 第一种:将视频放大来控制。 视频播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 ...

    这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。

    第一种:将视频放大来控制。

    视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 110% ,可以实现全屏,超过是溢出隐藏就可以了。

    确定:手机屏幕尺寸不固定,这个高度110%不好确定。

    第二种:使用 object-fit 来解决

    直接上代码:

    <video preload=‘auto’ id=‘video’ src=’’ webkit-playsinline=‘true’ playsinline='true’x-webkit-airplay=‘true’ x5-video-player-type=‘h5’ x5-video-player-fullscreen='true’x5-video-ignore-metadata=‘true’ width=‘100%’ height=‘100%’>

    不支持video

    编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以正常定义,使其他元素可以覆盖在视频上面。

    css:保持画面的原有比例

    #my-video{
    object-fit: cover;
    object-position: center center;

    简单的demo实现:

    <!doctype html>

    视频播放器

    this.video = this.$refs.video;
    },
    methods: {
    player:function(www.t6q8.com){console.log(this.video.clientWidth);
    console.log(this.video.clientHeight);
    if(this.video.paused){
    // 播放
    this.video.play();
    }else{
    // 暂停
    this.video.pause()
    };
    }
    }
    });

    解释下:object-fit

    fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

    contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。

    cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。

    none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

    scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个

    转自 脚本之家

    展开全文
  • <code><!-- <meta name="viewport" content="width=device-width, initial-scale=0"> <meta name="viewport" content=...谢谢</p>
  • HTML5在手机端实现视频全屏展示方法

    千次阅读 2021-06-09 06:26:30
    最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。第一种:将视频放大来控制。视频播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 ...
  • CocosCreator h5游戏移动端全屏显示

    万次阅读 热门讨论 2018-01-11 15:15:48
    文章里的方法主要是针对creator游戏引擎的构建后项目,但是也可以由此文章中的方法,再作针对其他h5游戏引擎的修改,由此借鉴出其他h5游戏引擎的全屏显示。 先来看构建后的文件结构: 其中,红色框里的文件是...
  • 手机h5 video 的全屏事件

    千次阅读 2022-03-18 16:38:42
    video 自带全屏功能,但是全屏横屏显示,需要手机开启横屏切换; 2 需求二 需要知道全屏和结束标识, video文档有这两个事件,想着直接用就行; 问题 全屏事件压根不起作用,不知道为啥 解决 video 的全屏转换 ...
  • Android原生API提供了WebView来加载H5网页,H5网页中可能使用Video标签实现视频播放,正常播放比较好实现,但是一般来说视频都会要求全屏播放,这怎么弄呢?下面就来实现一下。整体思路:点击Video标签全屏播放按钮...
  • H5】阻止H5页面播放视频默认全屏

    千次阅读 2020-04-02 11:27:18
    老是看到有人找不到阻止视频默认全屏的问题,看到别人发的帖子不是隐藏video标签使用canvas绘制视频就是使用插件来禁止视频默认全屏的问题,其实没有那么麻烦的只需要设置一下属性就可以了 x5-playsinline="true" ...
  • iphonex 已经上线有一段时间了,作为业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,,所以需要对iphonx 适配,下面就详细说说如何适配先看一张适配前后的图: iphonex 提供的 meta 头contain可视化窗口完全...
  • 最近有个需求在h5页面中加载视频,并网页内自动播放。但是实际呢视频能直接播放,但是会弹出视频播放器全屏播放。而需求是不全屏自动播放,不符合需求要怎么办呢?只能改改改。。。解决办法:1.h5标签中要设置...
  • function judgeBigScreen() { //,这里根据返回值 true 或false ,返回true的话 则为全面屏 var result = false; var rate = window.screen.height / window.screen.width; var limit = window.screen.height == ...
  • 第一次做移动端的视频播放,遇到了很多bug。 1、video标签中的object-fit: 的属性设置不能为cover。否则会出现以下问题: ... 退出全屏后,整个视频页面浮动了起来,左侧能看出明显的问题: 代码如下: ...
  • 视频禁止默认全屏播放
  • 微信播放最大坑h5页面分享到微信上播放视频,最大的坑就是Android手机上,X5浏览器会劫持Video标签用腾讯播放器弹出全屏播放,处于最上层,覆盖DOM元素,更可恶的是播放完毕时,会出现很多腾讯的广告视频,比如:...
  • api给的例子也是由一个条件来出发这个html5的全屏函数: element.requestFullScreen() Makes an inpidual element full-screen, e.g. document.getElementById(“myvideo”).requestFullScreen().
  • 安卓手机会出现白色背景帧需要加入纯海报图: poster="path-imgs" 安卓手机没有播放按钮解决: letvideo=document.getElementById('video') video.play() setTimeout(()=>{ video.pause() },20) 禁止...
  • html5视频播放自动全屏,暂停退出全屏等功能参考了html5 video fullScreen全屏实现方式及司徒正美的书《javascript框架设计》287页相关代码后,Safari上实现了视频播放自动全屏、暂停退出全屏等功能。...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document<... /* 注意兼容性问题 全屏显示伪类选择器 */ background-color: pink;
  • iOS的WebView展示H5不能全屏展示办法一方法二 办法一 直接原生端配置UIWebView配置属性 if (@available(iOS 11.0, *)) { g_web.scrollView.contentInsetAdjustmentBehavior = ...
  • 适配用的阿里的flexible做的适配,宽度是750,其他手机基本没问题,就是华为这个折叠屏幕显示不完全,请教下大家这个该怎么做呀
  • 微信 安卓 H5 video视频播放自动全屏

    千次阅读 2020-04-29 20:07:54
    最近做到一个项目是要求微信(企业微信)中打开视频播放,但是微信安卓手机上播放视频时会自动全屏,解决办法:( 2020-04-29测试有效,华为,小米,苹果 ) <video id="my-video" class="video-js" ...
  • &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; 这句能够应付一部分浏览器 比如oppo自带的 小米 魅族不行
  • html5 网页全屏显示

    千次阅读 2021-06-08 17:38:48
    1.统一样式 因为不同的浏览器的样式不一致,所以,最好统一样式 2.全屏和退出全屏的方法 3.调用 启动全屏 退出全屏 更多的相关html5特性,请戳我
  • 使用vue和vant框架,想设置一张背景图片,显示全屏,包括手机系统状态栏的背景也是我设置的背景
  • width=device-width,initial-scale=1.0表示的是显示窗口的宽度等于设备的屏幕宽度,initial-scale=1.0,即初始的缩放比例为1.0;minimum-scale表示的是允许缩放的最小比例;maximum表示的是允许缩放的最大比例;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,790
精华内容 1,116
热门标签
关键字:

h5在手机怎么显示全屏