android导播切换,导播台移动端开发遇见的问题总结

前言：移动端导播台采用 WebRtc 进行通信，系统要求版本 ios:11.2+

css

1、使用outline:none去除轮廓外框

div{

outline:none;

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

2、阻止ios 10的缩放功能

标签的方法已经失效，只能暂时用js阻止事件

document.addEventListener('touchstart',function (event) {

if(event.touches.length>1){

event.preventDefault();

}

})

var lastTouchEnd=0;

document.addEventListener('touchend',function (event) {

var now=(new Date()).getTime();

if(now-lastTouchEnd<=300){

event.preventDefault();

}

lastTouchEnd=now;

},false)

3、单位vh vw

用了vh vw，在 safari 中是不包括底部按钮框的高度，做单页应用时要注意元素是否被遮盖。

4、视频旋转

ios系统，js是无法阻止横屏时视频播放器不发生旋转的，需要重新设置样式。

@media all and (orientation: portrait) { //这里是竖屏

}

@media all and (orientation: landscape) { //这里是横屏

}

1、判断系统类型

var isMobile = {

Android : function() {

return navigator.userAgent.match(/Android/i) ? true : false;

BlackBerry : function() {

return navigator.userAgent.match(/BlackBerry/i) ? true : false;

iOS : function() {

return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;

Windows : function() {

return navigator.userAgent.match(/IEMobile/i) ? true : false;

any : function() {

return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());

}

};

if (isMobile.iOS()) {//ios*斜体文字*

}

android导播切换,导播台移动端开发遇见的问题总结相关推荐

Android人脸识别的初步学习，移动端开发技术创新
根据readme中的内容修改项目. 呀,报错了-面对看不懂的错误,我们就-百度- 经过一番艰难险阻,我们的demo终于运行起来了,如下图所示: 然而,当我一次又一次注册人脸,无论是网络上找到明星的照片 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
android 3d布局轮播,android 图片/视频混合轮播控件banner
android 图片/视频混合轮播控件banner 在youth5201314的图片轮播控件做的修改原作者github地址:https://github.com/youth5201314/banne ...
轮播图的实现，点击按钮切换轮播图等功能
菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...
轮播切换_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
Android 视频图片轮播,详解android 视频图片混合轮播实现
循环添加视频view 图片view for (int i = 0 ;i if (beansarraylist.get(i).gettype()==1){ videoplayer = new nice ...
html全屏banner轮播代码,基于jquery实现全屏banner自动轮播切换
特效描述:基于jquery实现全屏banner 自动轮播切换.基于jquery实现全屏banner自动轮播切换代码结构 1. 引入JS 2. HTML代码 *{margin:0;padding:0 ...

android导播切换,导播台移动端开发遇见的问题总结

android导播切换,导播台移动端开发遇见的问题总结相关推荐

最新文章

热门文章