html5
日积一步
每天保持一小步,十天就是一大步!
展开
-
监听H5的横竖屏
真正想要H5强制竖屏,兼容性上是比较难处理的,然而可以通过别的方式达到类似的效果;1、检测H5横竖屏2、检测到横屏时,给出提示,并隐藏页面元素(引导用户竖屏)话不多说,直接上代码window.addEventListener("resize", function (event) { clearTimeout(this.dialogTimeout) this.dialogTimeout = setTimeout( () =>{ if原创 2022-05-20 18:13:31 · 2239 阅读 · 0 评论 -
快速实现拖拽,darg.js拿来即用!!!
可根据业务逻辑快速完成拖拽,拿来即用!!!github地址:https://gitee.com/dmui/darg/tree/master/引入cdn文件darg.js:https://gitee.com/dmui/darg/raw/master/darg.js如何完成拖拽注册:<style> .demo{ width: 80px; height: 80px; border-radiu..原创 2021-03-23 11:12:57 · 352 阅读 · 0 评论 -
H5监听键盘弹起收回,用法超简单!兼容Android、iOS。
引入以下代码,仅需2行代码即可监听!/** * 兼容Android、iOS各浏览器 * H5键盘监控弹出(KeyboardUp)、收起(KeyboardDown)事件定义 * auth: huaicheng151201@163.com * time: 2020.11.20 * 用法: * 与click事件的绑定用法无异,如: window.addEventListener("KeyboardUp",function() { //键盘弹起来了 },false)原创 2020-12-15 15:00:31 · 5472 阅读 · 8 评论 -
h5页面兼容刘海屏快速解决方案
关键词条:viewport-fit:cover - 视图端口被缩放以填充设备显示@supports - css中用来检测浏览器是否支持某些css语法功能的一个标签,它和@media一样支持or(或者)、and(并且)、not(非)关键字用来做逻辑判断。safe-srea-inset-[top | right | bottom | left] - 设置确保安全边界兼容ios底部横条css代码:1、<meta name="viewport" content="...原创 2020-09-18 16:36:07 · 2657 阅读 · 3 评论 -
高级之路篇十六:web存储模仿微信小程序的缓存api
模仿微信小程序数据缓存的api,对h5本地存储的封装,支持sessionStorage与localStoragefunction Storage(){ this.getDataType = function(data){ var result = '', type = typeof data; if( type ...原创 2019-05-09 20:43:39 · 287 阅读 · 0 评论 -
初次尝试web浏览器消息通知,并震动提示
注意的是,本地测试服务是完全可以看到消息通知的,如果线上环境,必须要求https协议,否则自动视为拒绝。通知API可能不再从不安全的来源使用。您应该考虑将应用程序切换到安全源,比如HTTPS。见https://goo.gl/rStTGz了解更多细节。js代码:;(function(window){ var _notification = function(){...原创 2019-05-22 14:33:11 · 1429 阅读 · 0 评论 -
mac字体渲染精细处理
问题根源:同样设置的字体,为什么和别人的代码渲染出来的效果在mac上会显得比较’莽‘?全局除了设置字体font-family外, 还需要设置://抗锯齿,使得更精细平滑-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-smoothing: antialiased;-web...原创 2019-07-31 22:17:29 · 894 阅读 · 0 评论