今天项目中需要跨浏览器地播放视频，在网上找了一下，找到了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为单位的数值
几乎所有的Android端手机APP都会获取隐私权限，在开发过程中隐私全权限这部分内容是非常重要的，上架应用市场也会进行审核。了解这一部分内容非常有必要。...Android自系统6.0开始，提供动态权限机制，对于敏感权限（存储，定位，录音，拍照，录像等），需要在APP运过程中动态向用户申请，这就和IOS系统的权限使用体验一致了，（IOS一直以来就是动态权限）...在使用YonBuilder移动开发平台开发移动应用时，在云编译安卓包的时候，需要设置隐私权限，如所示： 其中，其中部分隐私权限是敏感权限，如电话、位置、相机、麦克风、短信等，需要勾选，并在需要的时候...具体使用方法可以见接口文档：https://docs.apicloud.com/Client-API/api 对于部分非敏感权限，如闪光灯、开机启动、系统日志、安装应用等，用到的时候需要勾选...在使用YonBuilder移动开发平台进行开时，云编译的时候一定要关注隐私权限的设置，否者会导致对应的功能是失效的，也可能导致APP崩溃。
当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
需求 在一些项目业务中，经常会使用到画板，让用户自己去写/画一些东西做标示，比如说在线签电子合约、签名等，如果不用插件，那么如何使用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移动端触屏滑动日期控件
eruda与腾讯推出的vconsole很相似，都是用于移动端的调试，让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。...在PC上调试好好的页面，运行在手机端时却直接崩溃，很难判断究竟发生了什么 ?手机端页面请求服务端数据后，页面渲染不正确，根本不清楚是接口返回错误还是前端渲染错误 ?...手机端显示异常，可是在PC端显示却是好好的，完全搞不懂是哪个CSS编写有问题 遇到上述情况的你，心情就像下面的样子 ?...eruda是什么 手机端遇到问题时，你最希望的是手机端可以像PC上的Chrome那样——用调试工具看看究竟发生了什么。 于是就有了eruda。...如何使用 通过CDN使用： ? 通过npm安装： ? 在页面中加载脚本： ? Js文件对于移动端来说略重（gzip后大概80kb）。建议通过url参数来控制是否加载调试器，比如： ?
核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
一、移动端浏览器 ---- 移动端浏览器 比 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(谷歌浏览器) 的模拟手机调试 搭建本地...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。...5.2css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址
移动端基础 移动端浏览器我们主要针对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 是模块化的 拥有详细文档 官网地址:
单位使用px和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。...然后对原本使用px的地方使用rem来替换。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。 具体做法 1 根据不同的设备宽度在根元素上设置不同的字体大小。
在更大一个量级上，移动客户端需要用到更专业的桌面数据库 SQLite。 这篇文章主要从 SQLite 数据库的使用入手，介绍如何合理、高效、便捷的将这个桌面数据库和 App 全面结合。...通过 timer 控制数据库事务定时提交 Transaction 是任何一个数据库中最核心的功能，但其对 Server 端和客户端的意义却不尽相同。...缓存被编译后的 SQL 语句 和其他很多编程语言一样，数据库使用的 SQL 语句也需要经过编译后才能被执行使用。...数据库完整性校验 移动客户端中的数据库运行环境要远复杂于桌面平台和服务器。掉电、后台被挂起、进程被 kill、磁盘空间不足等原因都有可能造成数据库的损坏。...在 WHERE CLAUSE 中，前导列必须使用等于或者 in 操作，最右边的列可以使用不等式，这样索引才可以完全生效。
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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
