HTML,CSS,VUE常见问题解决

SanMu三木

已于 2023-05-15 15:45:21 修改

阅读量576

点赞数

文章标签： html5 css 前端 vue.js scss

于 2023-03-01 10:29:36 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60322614/article/details/129275773

版权

本文介绍了如何通过JavaScript模拟设备平台和用户代理，实现PC和移动设备的强制转换。同时，提供了针对iOS系统的CSS解决方案，如span和img标签的对齐以及特定于iOS的CSS规则。另外，讨论了取消滚动条样式的CSS方法和使用JavaScript实现视频全屏播放的功能。最后，提到了JavaScript中.toFixed()方法可能导致的类型转换问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(); 
   }
}

使用.toFixed保留小数位时会将数字转为字符串形式从而产生一些问题

//在一些特定场景下data.toFixed(2)会出现报错
<showDatas :num="(communalArea / 15).toFixed(2)"/>