首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    H5直播避坑指南

    视频的高度问题 在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 ?...而一般用户进入页面基本都是竖屏,所以我们就要考虑怎么让用户在竖屏点击全屏按钮时,能体验到像终端app一样自动进入横屏全屏的体验,下面有两种方案 1.在用户点击全屏时候,通过css3属性旋转屏幕 通过css...在拉起键盘输入弹幕的时候,键盘不受控制还是竖屏显示了 如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时,通过js api来控制webview旋转横屏...在手Q里,我们和终端的同学合作添加了控制webview横竖屏的接口 在用户点击全屏的时候,先判断当前是否横屏 /** * 是否横屏 */ function isHorizontal...mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖屏,1是横屏 }); 如果是竖屏则强制webview旋转进入横屏,同时监听页面的

    10.9K151

    H5直播避坑指南

    视频的高度问题 在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 [1498530055801...[1498530690853_9107_1498530690371.jpg] 而一般用户进入页面基本都是竖屏,所以我们就要考虑怎么让用户在竖屏点击全屏按钮时,能体验到像终端app一样自动进入横屏全屏的体验...如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时,通过js api来控制webview旋转横屏 在手Q里,我们和终端的同学合作添加了控制webview...横竖屏的接口 在用户点击全屏的时候,先判断当前是否横屏 /** * 是否横屏 */ function isHorizontal() { if (window.orientation...mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖屏,1是横屏 }); 如果是竖屏则强制webview旋转进入横屏

    5.4K130

    H5 直播避坑指南

    视频的高度问题 在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 ?...而一般用户进入页面基本都是竖屏,所以我们就要考虑怎么让用户在竖屏点击全屏按钮时,能体验到像终端app一样自动进入横屏全屏的体验,下面有两种方案 1.在用户点击全屏时候,通过css3属性旋转屏幕 通过css...在拉起键盘输入弹幕的时候,键盘不受控制还是竖屏显示了 如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时,通过js api来控制webview旋转横屏...在手Q里,我们和终端的同学合作添加了控制webview横竖屏的接口 在用户点击全屏的时候,先判断当前是否横屏 /** * 是否横屏 */ function isHorizontal...mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖屏,1是横屏 }); 如果是竖屏则强制webview旋转进入横屏,同时监听页面的

    2.8K90

    metahandler.js——移动端适配各种屏幕无痛工具脚本

    使用的基本框架 主要使用的基本框架是:MetaHandler.js。大家可以点击此处下载——“下载MetaHandler.js”,提取密码为:9074,也可以直接复制下面的代码。 !...可能的问题 在使用谷歌浏览器进行浏览时,如果横屏后点击刷新,则页面会再缩小,成为居中显示状态,此时再竖屏之后,左右也会留白(此时再刷新是能重新恢复正常)。具体效果如下。 横屏后再刷新的效果: ?...从横屏恢复到纵屏的状态: ? 我们的看法:很少有人在旋转到横屏之后再刷新页面。而且目前移动端使用谷歌浏览器的人也很少,所以个人感觉这个bug是可以忽略的。...另外,对于横屏转回到纵屏的时候,实际上我们是可以进行设备方向检测,然后再触发一次页面刷新,就不会出现纵屏上的问题了~ 最后的话:我们使用了这个框架进行页面的开发,但是最近在使用时,感觉到在一些浏览器当中有些卡顿...,用同样的设备和浏览器去测试了网易的手机页面,倒是没有什么卡顿现象,关于卡顿的问题,目前还在思考当中~~~ 欢迎沟通交流~HTML5学堂

    1.9K110

    移动端H5知识 - 固定像素的实现方法

    使用的基本框架 主要使用的基本框架是:MetaHandler.js。 !...可能的问题 在使用谷歌浏览器进行浏览时,如果横屏后点击刷新,则页面会再缩小,成为居中显示状态,此时再竖屏之后,左右也会留白(此时再刷新是能重新恢复正常)。具体效果如下。 横屏后再刷新的效果: ?...从横屏恢复到纵屏的状态: ? 我们的看法:很少有人在旋转到横屏之后再刷新页面。而且目前移动端使用谷歌浏览器的人也很少,所以个人感觉这个bug是可以忽略的。...另外,对于横屏转回到纵屏的时候,实际上我们是可以进行设备方向检测,然后再触发一次页面刷新,就不会出现纵屏上的问题了~ 最后的话:我们使用了这个框架进行页面的开发,但是最近在使用时,感觉到在一些浏览器当中有些卡顿...,用同样的设备和浏览器去测试了网易的手机页面,倒是没有什么卡顿现象,关于卡顿的问题,目前还在思考当中~~~

    1.4K40

    Auto.JS实现抖音,刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频

    Auto.js 是个基于 JavaScript 语言运行在Android平台上的脚本框架。Auto.js主要工作原理是基于辅助服务AccessibilityService。...Auto.js是利用安卓系统的“辅助功能”实现类似于按键精灵一样,可以通过代码模拟一系列界面动作的辅助工作。...因为是开源框架所以安全性很高,他能在手机上模拟人的重复繁琐的工作,不打破被执行的APP规则,不修改,不破坏被执行的APP,可以放心使用 1.手机下载Auto.JS 打开,开启无障碍模式 2、新建文件...代码如下 auto(); var appName=rawInput("","刷宝短视频"); launchApp(appName); sleep("5000"); setScreenMetrics(1080,1920...sleep(10000); } 以上代码发现不适用所有手机屏幕,有些手机会划到一半弹回去了,于是我苦思疾想又重新写了一个适用所有机型的代码 auto(); var appName=rawInput("","刷宝短视频

    9K20

    移动端适配解决方案

    ,动态判断当前设备的dpr,从而改变根元素的font-size,也是一种很好的方案,例如 著名的flexible.js,非常好用,唯一不足时多引入了一个js文件,而且对安卓的适配性不是很好。...用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况) 例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,...如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。...截图来自X5内核-Can I Use 视口单位特点是宽度或者高度不同,对应的尺寸也会发生变化,从而达到适配即自适应,然而也有缺点,不能设置最大最小宽度限制,当比如横屏展示的时候,宽度很宽的情况下,必须设置最大...此方法实现的适配,可以很好的做平板的适配,只需要限制最大font-size就可以,对于横屏下显示的字体大小设置,个人感觉一个很方便的方法,直接在横屏下所有的vw改为vh即可,唯独在页面是横屏但宽高差别不大的时候

    1.3K30

    11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)

    我觉得优秀的代码其中有一条肯定是代码的复用性强。...11 个有趣实用的 JS 特性 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师。这里分享 11 个实用又有趣的 JS 特性,使用得当可以提高你应用的友好性。 1....监听屏幕旋转变化接口: orientationchange 定义: 这个 API 可以将你手机是否横屏的情况暴露给需要知道的人知道。...90 向左横屏 -90/270 向右横屏 180 倒屏 通过这个 API 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。...如果只是样式的改变也可以通过媒体查询来监听: /* 竖屏 */@media screen and (orientation: portrait) { // some css code}/* 横屏

    89130

    关于iPad的100个问题

    大屏iPad有什么秒用? 大屏iPad可以作为MacBook的扩展屏幕,打开MacOS随航,连接iPad,MacBook就有了两个屏幕~ 2. iPad应对锁区App(比如TikTok)有什么良策?...iPad Pro 外放音质比iPhone好得多,安装iPad版网易云音乐,然后将iPad横放,左侧是细腻的唱片动画,右侧是歌词,看起来极其舒服,仿佛一个唱片机在运作。...iPad可以剪视频,但iPad的性能并不算强,存储空间非常有限,导入导出4K视频会很麻烦,专业的视频剪辑,建议使用MacOS或Windows。 7. iPad 可以自由安装App么?...首先你要有一颗强大的想要学习的心, 然后是安装一些软件,比如notability(听课笔记),MarginNote Pro(看书总结),Procreate(绘图); 尽量不安装游戏App,不安装刷剧App...iPad相对Mac有几个硬伤,外部接口稀缺,性能不够强,配套的专业软件生态不够好。 13. iPad 可以作为Windows 扩展屏么? 可以! Duet Display 了解下?

    2K20

    【春节日更】浏览器与js等相关面试题汇总

    分享了vue 及 react 相关的面试题,今天分享下 最新收集的js与其它面试题 因为题太多,so , 主要分享下大家不太熟悉的知识点,及提问的方式 注:有些题目类同,因为提问方式不同...浏览器 浏览器渲染机制 浏览器有哪些线程 浏览器的运行机制 url实现原理 UDP TCP区别 三次握手,四次挥手 http是什么?无状态协议是什么?...js知识点 : new实现原理 promise实现原理 Promise async await 算法: 选择排序和快速排序 回显:一个列表需要请求数据,同时需要初始化怎么做 hasOwnProperty...()的用法 js是单线程、浏览器怎么处理的 Eventloop,宏任务微任务,那些是宏任务那些是微任务,执行顺序 防抖和节流是什么?...怎么优化首屏渲染速度 移动端怎么固定横屏显示?

    25530

    js和css实现手机横竖屏预览思路整理

    算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的; 一个手机页面在这里预览,要通过标签,左边选择不同的select选项,通过监听select选项的值,在js...中动态改变iframe的src来实现; 因为要实现横屏和竖屏的预览,切记,千万不能在点击横屏的时候,把竖屏的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖屏的,只是页面跟着一起旋转了90度,...要单独另外写一个横屏的box,宽度大于高度的,这样当预览页面识别到宽度大于高度,即按横屏的效果展示; 我这里实现思路是把横屏的div默认display:none;默认选择竖屏的时候,就直接把竖屏的box...下的iframe的url和横屏模式下的iframe的url一起改变了,当选择横屏的时候,展示横屏的box,隐藏竖屏的box,但是事实是横屏的此时不会展示页面,而是空白,而在默认选择了横屏的情况下,去切换其他页面的时候...横屏与竖屏通过定位放在同一个位置即可。

    3.7K50

    实战 | 移动端如何让页面强制横屏

    =),要求横屏显示,不能竖屏。 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很蠢的事情。这时如果用户没开启手机里的横屏模式,还要逼用户去开启。...那么现在我唯一能想到的解决办法,就是在竖屏模式下,写一个横屏的div,然后把它转过来。 好了我的测试页面结构如下: 很简单对不对,最终的理想状态是,把lol非常和谐的横过来。...好了来看看区分横屏竖屏的css: 说白了,是要把print这个div在竖屏模式下横过来,横屏状态下不变。所以在portrait下,没定义它的宽高。会通过下面的js来补。...在这里我们先取得了屏幕内可用区域的宽高,然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏,就把print这个div的宽高设置下,对齐,然后旋转。...最终效果如下: 竖屏 横屏 最后,这么做带来的后果是,如果用户手机的旋转屏幕按钮开着,那么当手机横过来之后,会造成一定的悲剧。

    4.9K30

    常用开发技巧系列(五)

    前面说了,这个解决起来很简单,但是我们不明不白的设置这东西就是属于稀里糊涂了: 二: 横屏切换竖屏 ---- 我们一般的游戏都是横屏的,当然也有竖屏的,在日常的需求中很有可能就涉及到游戏和原生界面的交互...,就有了横屏游戏切换竖屏原生界面出来,其实最让人头疼的,是你切换界面之后还有键盘的问题!...在自己的游戏中就有这样一个切换是在客服系统当中,横屏的游戏需要你切换到竖屏的一个客服聊天界面!其中就涉及到这个键盘的问题!...didReceive message: WKScriptMessage) { let Url = message.body //MARK: 唤起浏览器...当然也可以是JSON字符串,JSON就能满足一般的需求了,要是JS返回的是一个Objcet,对不起你没办法处理!你可以叫JS把对象处理成JSON字符串给你。

    1.5K41
    领券