怎么设置看视频自动横屏?

发布网友发布时间：2022-04-22 21:17

共8个回答

懂视网时间：2022-05-14 09:39

最近公司要开发一个移动端的养成类网页游戏（就是用手点各种按钮最后你会找到一个女朋友=。=），要求横屏显示，不能竖屏。
有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。
我先进行了调研，想看有没有现成的api。参考过screen的api以及manifest方法，实验结果当然是不行。
那么现在我唯一能想到的解决办法，就是在竖屏模式下，写一个横屏的p，然后把它转过来。

好了我的测试页面结构如下：

<body class="webpBack">
 <p id="print">
 <p>lol</p> 
 </p>
</body>

很简单对不对，最终的理想状态是，把lol非常和谐的横过来。
好了来看看区分横屏竖屏的css：

@media screen and (orientation: portrait) {
 html{
  width : 100% ;
  height : 100% ;
  background-color: white ;
  overflow : hidden;
 }
 body{
  width : 100% ;
  height : 100% ;
  background-color: red ;
  overflow : hidden;
 }
 #print{
  position : absolute ;
  background-color: yellow ;
 }
} 
@media screen and (orientation: landscape) {
 html{
  width : 100% ;
  height : 100% ;
  background-color: white ;
 } 
 body{
  width : 100% ;
  height : 100% ;
  background-color: white ;
 }
  #print{
  position : absolute ;
  top : 0 ; 
  left : 0 ;
  width : 100% ;
  height : 100% ;
  background-color: yellow ;
  }
}
#print p{
 margin: auto ;
 margin-top : 20px ;
 text-align: center;
 }

说白了，是要把print这个p在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。

 var width = document.documentElement.clientWidth;
 var height = document.documentElement.clientHeight;
 if( width < height ){
 console.log(width + " " + height);
 $print = $('#print');
 $print.width(height);
 $print.height(width);
 $print.css('top', (height-width)/2 );
 $print.css('left', 0-(height-width)/2 );
 $print.css('transform' , 'rotate(90deg)');
 $print.css('transform-origin' , '50% 50%');
 }

在这里我们先取得了屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把print这个p的宽高设置下，对齐，然后旋转。
最终效果如下：

竖屏

横屏

最后，这么做带来的后果是，如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下:

 var evt = "onorientationchange" in window ? "orientationchange" : "resize";

 window.addEventListener(evt, function() {
 console.log(evt);
 var width = document.documentElement.clientWidth;
  var height = document.documentElement.clientHeight;
  $print = $('#print');
  if( width > height ){

  $print.width(width);
  $print.height(height);
  $print.css('top', 0 );
  $print.css('left', 0 );
  $print.css('transform' , 'none');
  $print.css('transform-origin' , '50% 50%');
  }
  else{
  $print.width(height);
  $print.height(width);
  $print.css('top', (height-width)/2 );
  $print.css('left', 0-(height-width)/2 );
  $print.css('transform' , 'rotate(90deg)');
  $print.css('transform-origin' , '50% 50%');
  }

 }, false);

热心网友时间：2022-05-14 06:47

百搜视频，怎么设置锁屏看视频功能，下面一起来看看怎么操作吧。

1、首先在手机桌面点【百搜视频】，如下图所示。

2、进到页面点【我的】，如下图所示。

3、然后在打开的个人中心页面里，点【设置】。

4、最后进到设置页面，然后把【锁屏看视频】的按钮开启即可。

热心网友时间：2022-05-14 08:05

手机实现横屏，只需要开启手机自动旋转屏幕功能就可以了，操作步骤如下：
1、打开手机，在主界面中点击“设置”菜单。
2、来到“设置”界面之后，用手机往下拉动，在最底部点击“可访问性”。
3、来到可访问性设置窗口，然后点击下面“自动旋转屏幕”右边的方框进行选中和打开即可。
备注：以上设置仅是以安卓系统的三星手机操作为主。

热心网友时间：2022-05-14 09:40

如果是桌面双击HOME键，下面出现一串你使用过的软件，往左滑动，设置横竖键在播放器旁边如果是上网看视频苹果手机用自身带的Safari系统浏览器上网看视频就可以横看了如果你想用别的播放器看只能先把播放器下载到手机然后到播放器里面找视频看也是可以横看的

热心网友时间：2022-05-14 11:31

用AVplater的话就可以了，设置好之后看电影自动横屏

热心网友时间：2022-05-14 13:39

不关横屏锁不就可以了，

热心网友时间：2022-05-14 16:04

怎么能打开？

热心网友时间：2022-05-14 18:45

同求，顶一下，不过估计没有的。苹果软件都是大爷做的，除非是插件。。。

全部栏目

怎么设置看视频自动横屏?