几个前端小问题（视频自动播放、移动端滚动条、富文本编辑框图片手机上显示······）

1、视频自动播放问题

<video poster="images/def.png" width="100%" controls="controls"  id="video" autoplay webkit-playsinline="true" playsinline="true">

   <source src="' + 播放路径+ '" type="video/mp4" id="source" />

</video>

<script>

var video = document.getElementById("video");//video标签

if (window.WeixinJSBridge) {

   WeixinJSBridge.invoke('getNetworkType', {}, function (e) {

      video.play();

      }, false);

} else {

   document.addEventListener("WeixinJSBridgeReady", function () {

      WeixinJSBridge.invoke('getNetworkType', {}, function (e) {

         video.play();

         });

   }, false);

}

video.play();

</script>

最后效果安卓手机微信端不能播放，其余可自动播放

2、后台通过富文本编辑框添加的图片手机上显示无法自适应问题

img { max-width: 100%; }

3、移动端显示滚动条问题

在页面引入如下css

::-webkit-scrollbar {

  width: 4px;

  height: 4px;

  color:#ffffff;

}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

  border-radius: 10px;

  background-color:#FFFFFF;

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

  background-color:#39b54a;

}

4、{margin: 0 auto} 样式不兼容360、ie浏览器

{margin: 0 auto}替换为{margin: 0 10%}，给左右边距赋值后解决

5、Location search 属性

假设当前的URL就是https://www.cnblogs.com/cnyg/p/12586322.html?redirect_url=https://www.baidu.com/

<script>
    document.write(location.search);
</script>

以上输出结果为：  ?redirect_url=https://www.baidu.com/

 

项目里遇到几个前端小问题，在此记录下是如何解决的，如有不足之处或者更好的解决方案，欢迎大家指正。