前端问题:如何让自己的页面在用户手机中,强制不旋转。(video)

现在手机都自带屏幕旋转,除非自己锁定屏幕,才不会发生旋转,前端可以控制自己的video播放页面设置屏幕不旋转,无论用户如何反转屏幕,我们的页面纹丝不动

0

1个回答

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
} 
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
针对video标签改变其缩放比例比如4:3
.border{ position:relative; width:100%; height:0; padding-bottom:75%; //因为padding和margin等受width影响,父容器固定后,子标签可以进行填充。此处75%是3/4,其他比例可以依照此法。 } video{ position:absolute; left:0; top:0; width:100
移动端如何让页面强制横屏
有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。
移动端网页版强制横屏实例
亲自验证可以让网页版移动端强制横屏,手机自动旋转也能适应,实现手机强制横屏。
移动端如何强制页面横屏展示
简书上stois的一篇文章,强制页面横屏
iOS开发如何禁止手机屏幕旋转
在工程-->target-->general里面找到Depolyment Info,里面有个device o rientation,里面第一个点上,其他的都取消就是默认竖屏了 如图: 如果我其中某个界面要用到横屏呢,是否有代码可以实现? 有一个系统的方法在默认竖屏的情况下 -(NSUInteger)supportedInterf
让h5页面强制横屏
var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, wrapper = document.getElementB...
mui 控制旋转屏幕方向
在用mui做app的时候,要做一个大数据统计需要横屏显示表格。所以去查了下资料。在这里记录一下。 我要做的是,在a页面是竖屏,在a页面点击到子页面。子页面要变成横屏。这种效果。 在html5+ 的api中有个锁定屏幕方向的方法是 plus.screen.lockOrientation 可以帮助我们解决屏幕旋转问题。 说明 锁定屏幕方向后屏幕只能按锁定的屏幕方向显示,关闭当前...
[bug]解决chrome浏览器不支持audio和video标签的autoplay自动播放
那么怎么解决呢?解决方式如下: 在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为“Default”,修改为 “No user gesture is required” 就可以了...
手机端video默认全屏的兼容写法
需求:希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,视频的宽度大于高度,并自动播放 浏览器效果展示: 实现全屏: 苹果全屏兼容,属于文档内全屏 playsinline="true" x-webkit-airplay="true" webkit-playsinline="true" 安卓全屏兼容,脱离文档全屏,当我退出全屏隐藏video以及外层盒子时,会有短暂...
iOS 强制屏幕实现旋转功能,超级简单。
最近再做视频播放,由于之前老项目里的屏幕旋转有些bug,不得不处理,于是查阅了大量资料,最终完美解决。 1.创建工程,设置Device Orientation 2.在AppDelegate中实现下面这个方法: 此属性默认是NO,在需要旋转的界面将属性设置为YES. 3.到了最关键的时候了,进入你需要旋转的当前视图控制器: 此方法每次横竖屏切换都会去调用。还没有完
ionic开发——禁止手机自动旋转下横屏处理
在ionic开发中,但我们手机屏幕设置成自动选择后,在手机横屏后,可能会打乱布局,解决办法如下: 1.进入项目目录安装插件 ionic plugin add cordova-plugin-screen-orientation      插件详情:https://www.npmjs.com/package/cordova-plugin-screen-orientation
手机页面强制横屏显示 html5 h5页面 强制横屏 可更改竖屏
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑,先上传,以备下次使用...
关于Android 中 avtivity 不跟随系统屏幕旋转而转的解决方式
由于手机系统中开启旋转屏幕后,我们的应用,也将跟随其旋转。在屏幕旋转后会重置应用的 Activity。这样带来的用户体验很不爽! 其实我们只要设置固定 Activity 显示方式,就可以无视 系统中的屏幕旋转: 屏幕显示方向无非 坚屏 与 横屏 // 坚屏 android:screenOrientation="portrait" // 横屏 android:screenOrientati
vue-video-player 视频显示在ie中旋转90度
出现原因: 视频的宽高的影响 解决办法: 暂无, 正在研究中。很抱歉。。。。。
APP内嵌HTML5实现视频横屏播放
需求:    页面是嵌套在app中的H5页面,点击首页的封面图加载播放视频页面,播放页只有一个video标签,所以如果如图就会很难看,并且播放按钮会很小,就像下图:    需要做到打开页面的时候自动播放并且横屏。    于是我就找资料啊找资料,发现了很多种做法,并且逐一实验,没有找到合适的。┭┮﹏┭┮    最后找到一个插件,从中获得了启发,虽然H5不能使手机横过来,但是换个思路,可以把视频转90...
iOS 指定页面允许旋转/ 指定页面强制横屏
1.  在APPdelegate.h 中 @property (assign , nonatomic) BOOL isPortrait; APPdelegate.m 中 -(UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientations
cordova app强制横屏
非常简单,只需要在config.xml里加上这行:<preference name="Orientation" value="landscape" />Orientation的值orentation的默认值是default。 可使用的值有:default, landscape, portait orentation可以将设备锁定方向,不受设备旋转影响。 对于IOS支持landscape&por
如何让前端强制从服务器拉取最新资源(html、css、js、图像)
为了加快浏览器访问速度,降低服务器压力,浏览器一般自动缓存html页面、 图片、Js及css文件,如需改变这种缓存机制,每次访问均从服务器拉取最新资源,具体可以操作如下: html页面禁止缓存 http://hi.marsthink.com?v=20150316 禁止缓存: html在头部加如下代码: &amp;lt;HEAD&amp;gt; &amp;lt;META H...
【暂未解决】video标签在移动端页面播放时默认全屏的问题
状况描述:在微信打开移动端页面的视频,点击播放后自动进入全屏模式,给标签添加webkit-playsinline后,一些机型无效,如小米。华为mate9是默认不全屏的。 解决方案: https://mp.weixin.qq.com/s?__biz=MzIzMjU4NDEyNw==&mid=2247483672&idx=1&sn=679b17e465c63d6143780beae1dca56a&c
Android APP禁止旋转和软键盘的控制
AndroidManifest.xml中修改案例<!-- screenOrientation portrait 限制此页面数竖屏显示 --> <!-- screenOrientation landscape 限制此页面横屏显示 --> <!-- windowSoftInputMode stateUnspecified:软键盘的状态并没有指定,系统将选择一个合适的状态或依赖于主题的设置
iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法
时间 2015-07-14 20:59:00  博客园-原创精华区 原文  http://www.cnblogs.com/fengtengfei/p/4646562.html 主题 UIWebView GitHub JavaScript iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 UIWebview在播放网页视频的时候我们需要进行是否全屏状态的监听
微信浏览器中阻止video全屏播放的方法
用html写移动端页面的过程中,有时候需要在一个相对小的区域去播放视频,免不了就会用到video标签,本来这个需求在一般的浏览器里时没什么问题的,但是用video在微信或者qq浏览器中播放时,发现视频会自动强制全屏播放,这个就很别扭了。。。在查了好多文章后,终于找到了解决办法!话不多说,看下面,其实很简单啊! 解决方法: 给video标签添加属性: x5-video-player-type="...
安卓和前段交互——视频播放video标签横竖屏
第一和前段交互做视频的播放记录一下。需求:前段播放视频 可以全屏点击,点击全屏按钮原生横屏,点击取消横屏原生竖屏。问题:一开始做的时候因为对webview的WebChromeClient里面的方法了解的不全面,所以想到的第一种方案就是让前段监听全屏按钮的点击事件当全屏时候调用原生我设置好的横屏方法,竖屏也是如此,可是问题就是前段使用的插件找不到全屏按钮事件。  解决: 后来通过前段人员和他认识的朋...
移动端手机网页强制横屏或全屏模仿横评的js和css3方法
移动端手机网页强制横屏或全屏模仿横评的js加css3方法最近项目有电子合同方面的开发,需要电子签字,(用的jsignature插件,如果有空以后单独写个使用心得)。在手机小屏幕上签字,全屏横屏才是最好的体验。用户竖屏打开页面时要去签字,提示用户把手机横过来,这样体验太low了,程序员要考虑能用技术解决的就不要去劳烦用户(免得他烦了回头打电话咬你)。 先来几个检测屏幕方向的方法://判断屏幕方向 if
打开页面强制刷新一次 html
最近做前端遇到个问题: 打开一个新界面,设置某个值后,再次点击目录,打开该界面发现设置的值与显示的值不一致,但是点设置时,看后端log发现有设置成功。所以找资料,发现是ie缓存问题,再次打开页面时,因缓存中存在,一些参数则不会从后端获取,从而出错,解决办法: 在js中,设置参数处,多加一行:setcookie('param_cookie',0,10);而在body标签中也加一个b
让PC端的页面按比例缩小到手机上显示
记一下这个坑,我们PC端的一个后台管理系统拿到手机上样式完全乱了,而我们想要的是按比例缩小到手机上显示就可以了。我也是搞了半天没有搞明白,今天终于发现原来是加了下面这行代码: &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,us...
iOS中关闭屏幕旋转功能时如何判断屏幕方向、强制旋转、CMMotionManager
目前多大数用户的苹果手机基本都有螺旋仪和加速器,我们可以根据这个东西来判断
H5页面自动适应横竖屏
对于样式:通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差,目前仅有:UC强制竖屏:&amp;lt;meta name=&quot;screen-orientation&quot; content=&quot;portaint&quot;&amp;gt;QQ强制竖屏:&amp;lt;meta name=&quot;screen-orientation&quot; content=&quot;landscape&quot;&amp;gt;通过HTML标签med
手机页面强制竖屏显示 强制竖屏 js css 手机屏幕竖屏
手机页面强制竖屏显示 横屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑,先上传,以备下次使用...
video 适应手机端的播放控制栏设置
video 设置了controls=“controls”属性,会获得浏览器默认的播放控制栏,不同浏览器的播放控制栏样式不同。 在微信公众号开发过程中,使用了这个属性,视频是左侧小窗,出现了播放控制栏展现不全的问题: 点击三个点以后是这样的: 解决方案: 1.iOS下没有这个问题,所以直接用controls属性即可 2.安卓手机下,先不设置controls属性,将一个中间为播放按钮...
强制应用横竖屏的简单设置
前言:在做android开发的时候,有时需要我们设置应用只能横屏或者竖屏展示。那么该怎么做呢,下面给大家说两个简单的方法。 一、Manifest文件中的设置 Manifest文件 二、代码中的设置 写在onCreate方法中 以上是竖屏的设置,横屏直接将portrait更改为landscape即可。...
Android6.0 旋转屏幕(四)应用强制设置方向
有时候我们也可以强制应用横频,这又是如何做到的? 就是调用了AMS的setRequestedOrientation接口,这个接口先是调用WMS的setAppOrientation函数设置这个Activity在WMS中的方向。然后在调用WMS的updateOrientationFromAppTokens函数旋转屏幕,最后在调用updateConfigurationLocked这个函数之前博客分析过
flutter强制横屏竖屏设置
void main(){ // 强制横屏 SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight ]); runApp(new MyApp()); } void main(){ // 强制竖屏 S...
video实现浏览器打开自动播放
1.html  &amp;lt;video id=&quot;minione-video&quot; class=&quot;minione-video&quot; poster=&quot;./common/images/mini-one/miniONE_BG2.jpg&quot; autoplay=&quot;autoplay&quot; muted=&quot;muted&quot; preload&amp;gt;        &amp;lt;source type=&quot;video/mp4&
Android屏幕旋转180°的实现
       这次分享一个实现屏幕只能在竖直方向上旋转的功能,开发相机的童鞋应该都会遇到屏幕旋转的问题,一般都是横竖屏的切换,布局变换,生命周期问题啥的,这些网上一搜一大堆的解决方案,什么监听onConfigurationChanged()方法然后判断当前属于横屏还是竖屏然后切换布局啥的,生命周期是在对应的Activity声明的时候添加android:configChanges=&quot;orientat...
安卓实现video小屏播放,不全屏播放的方法
&lt;video id="myvideo" style="width: 100%;" preload="auto" controls="controls" loop="loop" x5-playsinline="" playsinline="" webkit-playsinline=""&gt; &lt;source src="{$info.url}" type="video/mp4"&...
Video在网页和移动端无法自动播放问题??
&lt;video&gt;标签介绍 &lt;video&gt; 标签定义视频,比如电影片段或其他视频流。支持三种视频格式:MP4、WebM、Ogg。是H5的新标签,使用如下: //autoplay表示视频自动播放,controls表示显示视频控制器,loop表示循环播放 &lt;video width="320" height="240" autoplay="autoplay" con...
H5移动端横竖屏切换监听 副作用——手机整屏状态下安卓机input 问题
上一次说过了 H5移动端横竖屏切换监听的写法。横竖屏监听代码如下,这里就不做详细说明了。
video 移动端自动播放
 bug: 在video标签内定义的属性autoplay,在ios或者android内的微信浏览器是不生效的; 利用微信的JSAPI  的WeiixinJSBridgeReady() ///////////////////////////////////////////////////////////////////////////////// &amp;lt;script type=&quot;text/j...
vue强制刷新某组件(销毁并重置)
组件中添加 v-if=&quot;hackReset&quot; 复制代码 this.hackReset = false this.$nextTick(() =&amp;gt; { this.hackReset = true }) 复制代码