今天项目中需要跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法。 ... document.createElement('video');...-- 引入video.js的脚本文件 --> <!...,官方文档里还写了使用js初始化的办法,很简单,可参照https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md 使用video.js...不过今天使用video.js的时候发现一个问题,当设置了preload为auto之后,在chrome下首次刷新网页网络请求会出现一个错误。
平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole 通过vConsole.js...重写console方法,实现了类似于微信小程序的移动端调试效果 使用方法 方法一:引入 <script src="http://wechatfe.github.io/vconsole/lib
我们可以使用谷歌浏览器的移动端调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。...好在HTML给我们提供了一个关键字device-width ,该关键是读取当前移动设备的宽度。 因此,我们只需要使用下面的代码,即可让所有移动设备的视口宽度和其自身的宽度相等。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...注意:在移动端,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动端看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?...其实移动端是很简单的,计算数值问题大家可以使用calc()【括号内输入加减乘除就好了,系统会自动帮你计算最后结果的值的】 而且,无论任何数值,在经过一切计算后,在浏览器中表现出来的都会是PX为单位的数值
当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...更糟糕的是,当用户首次访问移动设备上的网站时,地址栏将在顶部可见,因此默认的体验是破碎的体验。...例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。...此外,通过在页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。...height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。
几乎所有的Android端手机APP都会获取隐私权限,在开发过程中隐私全权限这部分内容是非常重要的,上架应用市场也会进行审核。了解这一部分内容非常有必要。...Android自系统6.0开始,提供动态权限机制,对于敏感权限(存储,定位,录音,拍照,录像等),需要在APP运过程中动态向用户申请,这就和IOS系统的权限使用体验一致了,(IOS一直以来就是动态权限)...在使用YonBuilder移动开发平台开发移动应用时,在云编译安卓包的时候,需要设置隐私权限,如所示: 其中,其中部分隐私权限是敏感权限,如电话、位置、相机、麦克风、短信等,需要勾选,并在需要的时候...具体使用方法可以见接口文档:https://docs.apicloud.com/Client-API/api 对于部分非敏感权限,如闪光灯、开机启动、系统日志、安装应用等,用到的时候需要勾选...在使用YonBuilder移动开发平台进行开时,云编译的时候一定要关注隐私权限的设置,否者会导致对应的功能是失效的,也可能导致APP崩溃。
核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...更糟糕的是,当用户首次访问移动设备上的网站时,地址栏将在顶部可见,因此默认的体验是破碎的体验。...例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。...此外,通过在页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。...height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。
eruda与腾讯推出的vconsole很相似,都是用于移动端的调试,让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。...在PC上调试好好的页面,运行在手机端时却直接崩溃,很难判断究竟发生了什么 ?手机端页面请求服务端数据后,页面渲染不正确,根本不清楚是接口返回错误还是前端渲染错误 ?...手机端显示异常,可是在PC端显示却是好好的,完全搞不懂是哪个CSS编写有问题 遇到上述情况的你,心情就像下面的样子 ?...eruda是什么 手机端遇到问题时,你最希望的是手机端可以像PC上的Chrome那样——用调试工具看看究竟发生了什么。 于是就有了eruda。...如何使用 通过CDN使用: ? 通过npm安装: ? 在页面中加载脚本: ? Js文件对于移动端来说略重(gzip后大概80kb)。建议通过url参数来控制是否加载调试器,比如: ?
需求 在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢?...【本篇只讨论移动端,PC端请看上篇】 分析 很明显,我们需要一个canvas,关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下,其实本例也是基础操作。...逻辑分析 由于本篇只讨论移动端端,因此无非是在画布上监听三个触摸事件: touchstart、 touchmove、 touchend。 那么,在这三个事件中,分别需要做什么呢?...,本篇如法炮制,在移动端也顺利完成,相比pc端只是稍微的修改了一下获取坐标点的算法而已。...那么PC端和移动端如何并存呢? 出错了,怎么重新绘制呢? 绘制完成后,怎么保存呢?
最近需要实现一个在手机上选择时间的功能,当然首先想到的就是时间控件的使用,最后找到一个相对比较合适,在此记录一下。...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> jQuery移动端触屏滑动日期控件
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法...---- 使用 Chrom DevTools 谷歌浏览器开发工具 模拟手机调试 ; 使用 360 极速浏览器也可以使用该开发工具 ; 进入浏览器 , 输入网址 , 按下 F12 进入调试模式 , 点击工具中的
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能,所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件,仅供参考。...---- 参考文章: 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...,网址域名前面加m(mobile)可以打开移动端。...通过设备判断,如果是移动端打开,则自动跳转到移动端页面。...,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:
实习期间主要在写微信端H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。...在很早之前找解决方案的时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配。...后来找个时间好好拜读了之前的那篇文章,其实只需要导入一个 js 库就可以使用了。 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??...以后的项目应该都会<em>使用</em>这个方案。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...,网址域名前面加m(mobile)可以打开移动端。...通过设备判断,如果是移动端打开,则自动跳转到移动端页面。...,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地...4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。...通过设备判断,如果是移动端打开,则自动跳转到移动端页面。...,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。...5.2css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址
在更大一个量级上,移动客户端需要用到更专业的桌面数据库 SQLite。 这篇文章主要从 SQLite 数据库的使用入手,介绍如何合理、高效、便捷的将这个桌面数据库和 App 全面结合。...通过 timer 控制数据库事务定时提交 Transaction 是任何一个数据库中最核心的功能,但其对 Server 端和客户端的意义却不尽相同。...缓存被编译后的 SQL 语句 和其他很多编程语言一样,数据库使用的 SQL 语句也需要经过编译后才能被执行使用。...数据库完整性校验 移动客户端中的数据库运行环境要远复杂于桌面平台和服务器。掉电、后台被挂起、进程被 kill、磁盘空间不足等原因都有可能造成数据库的损坏。...在 WHERE CLAUSE 中,前导列必须使用等于或者 in 操作,最右边的列可以使用不等式,这样索引才可以完全生效。
单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。所以这样做的缺点就是,页面在某些尺寸的设备上显示的效果不好。...然后对原本使用px的地方使用rem来替换。这样,字体大小,内容尺寸,对随着屏幕宽度的变大而变大。 具体做法 1 根据不同的设备宽度在根元素上设置不同的字体大小。
1.实现方式和效果 前段时间需要做一个在PC端预览移动端的功能,由于我是前端不太好,就在网上查找资料,花了半天的时间终于有所收获,在这里把我的实现代码分享给大家。...想要在PC端实现模拟手机环境的预览效果,一般有两种方法,一种通过iframe实现,一种通过div实现的,这里我选择了后者。实现的效果如下: ?...Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>").prependTo('body'); //添加移动预览的
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。 先写个方法: ?..._isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); //Pc端跳转路由
领取专属 10元无门槛券
手把手带您无忧上云