HTML,CSS,VUE常见问题解决

HTML:

判断设备系统型号,并进行PC,移动强制转换

 <script>
    Object.defineProperty(navigator, 'platform', { get: function () { return 'Android'; }      });
    Object.defineProperty(navigator, 'userAgent', { get: function () { return 'Android'; }     });
    document.write("系统: " + navigator.platform);
 </script>

CSS:

解决IOS系统span和img标签对齐问题

span,img{
vertical-align: top;
}

CSS只针对IOS系统生效样式

/* iOS设备特定的CSS */
@supports(-webkit-touch-callout:none) {
    /*针对IOS的css*/
}

取消滚动条样式

.scroll{
    overflow: scroll;
}
.scroll::-webkit-scrollbar{//隐藏或取消滚动条
    display: none;
}

js:

利用js点击展示视频全屏

html元素
<button id="fullScreen">全屏播放</button>
<video src="xxx.mp4" id="movie"></video>

js代码
let btnFullScreen = document.getElementById('fullScreen');
let movie = document.getElementById('movie');
btnFullScreen.onclick = function(){
   if (movie.requestFullscreen) { 
      movie.requestFullscreen(); 
   } 
   //FireFox 
   else if (movie.mozRequestFullScreen) { 
      movie.mozRequestFullScreen(); 
   } 
   //Chrome等 
   else if (movie.webkitRequestFullScreen) { 
      movie.webkitRequestFullScreen(); 
   } 
   //IE11 
   else if (movie.msRequestFullscreen) { 
      movie.msRequestFullscreen(); 
   }
}

猜你喜欢

转载自blog.csdn.net/m0_60322614/article/details/129275773
今日推荐