
移动端h5
cc蒲公英
冰冻三尺非一日之寒,水滴石穿非一日之功
展开
-
移动端触碰/滚动屏幕,弹出框隐藏
html:<div class="langChange"> <div class="langTit">En ↓</div <div class="langBdshow" id="langBdshow" style="display:none"> ..... </div></di原创 2017-12-01 16:09:54 · 1992 阅读 · 0 评论 -
移动端(h5)浏览器分享选择好友总结
需求:需要在微信、各种移动端浏览器、QQ内置浏览器中实现将页面分享至微信好友、朋友圈、新浪微博、QQ好友、QQ空间。 分析:常用插件(百度、jiathis等)对于移动端的微信分享会出现上面刚开始讨论的问题,手机上弹出二维码无法使用,其他的媒体分享方式倒是正常,所以就移动端微信分享的问题进一步学习。 经过一番资料查找发现:微信中,只能通过提示点击右上角进行分享QQ浏览器、UC浏览器可通过开放的A原创 2017-06-22 11:03:11 · 15273 阅读 · 2 评论 -
移动端下拉加载更多DEMO(纯js实现)
首先需要给div加scroll事件,监听滚动条滚动动作。那何时触发加载动作呢?当滚动条滚到底的时候。如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚动条到底部了。公式如下。this.scrollHeight <= $(this).scrollTop() + $(this).height() 给出一个能跑的demo,需要引入jquery。转载 2017-06-05 09:58:08 · 9116 阅读 · 0 评论 -
自制H5页面工具盘点 宣传/相册/邀请函
如何推广营销是一家企业最为看重的问题,一些新奇有趣的方式方法更能获得大家的关注,比如H5页面。一个例子就是此前火爆整个朋友圈的“围住神经猫”游戏,上线仅短短48小时便创造了1千多万PV的神话,同时利用H5页面推广也赢得了各大厂商们的青睐。除了用于商业推广,H5页面在生活中也是有广泛用途的,由于传播方式广,制作速度快成本低,求婚、纪念册,甚至是自己的简历,都可以通过H5来展示。但在很转载 2017-04-26 15:17:55 · 3531 阅读 · 0 评论 -
HTML5离线存储
怎么用首先来讲解下离线存储的使用方法,说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。html manifest = "cache.manifest">...html>然后cache.manifest文件的书写方式,就像下面这样:CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.c原创 2017-04-10 16:32:47 · 570 阅读 · 0 评论 -
HTML5离线存储原理及实现
前言使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势:离线浏览 – 用户可在应用离线时使用它们速度 – 已缓存资源加载得更快减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。转载 2017-04-10 16:19:11 · 1070 阅读 · 0 评论 -
html5media:兼容、高效的HTML5视频播放器
一劳永逸的音频,视频解决办法随着HTML5的风行,、多媒体标签使得多媒体的插入更加容易,但是它们对低版本浏览器的支持度不够高,所以heml5media来了。大部分主流浏览器,一条代码解决兼容不要安装任何插件兼容各种浏览器和移动端多快好省的解决办法使用1 引用X转载 2017-03-31 15:42:18 · 13888 阅读 · 1 评论 -
移动js及兼容整理
1. ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下:(ps:想在哪个标签加背景,可以在它class后:before)body:before{ content:''; position: fixed; z-index: -1; top:0; rig原创 2016-09-08 16:11:17 · 515 阅读 · 0 评论 -
网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。要实现这个效果很简单,只需要加一行css代码即可:[css] view plain copy -webkit-overflow-scrolling : touch; 可用以下网页测试:[转载 2016-08-12 10:16:17 · 1713 阅读 · 0 评论 -
移动端获取屏幕宽度
目录:1$(window).width()2scrollWidth3让平台返回屏幕宽度概述:今天聊一个开发移动端经常碰到的一个问题:如何获取屏幕宽度,获取屏幕的办法有很多,今天总结一下各个方法的优点、缺点。$(window).width():用jQuery或者zepto获取屏幕宽度的方法最为简单,但是在Android平台上,有时会转载 2016-09-26 16:47:29 · 878 阅读 · 0 评论 -
h5 移动端响应式兼容
HTML5.js 请注意,我在demo中使用了html5标签,不过IE9之前IE浏览器不支持, , , 等html5新标签。可以在html文档中添加 html5.js 文件将解决这一问题。[if lt IE 9]> --> CSS3 Media Query 包含 Media Queries Javascript文件原创 2016-10-25 14:20:04 · 972 阅读 · 0 评论 -
@media属性针对苹果手机写法
通过 CSS3 的 Media Queries 特性,可以写出兼容iPhone4/iPhone5/iphone 6/iphone6 plus的代码:@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ .class{}/* 兼容iphone4/4s */}原创 2016-09-08 16:07:24 · 2277 阅读 · 0 评论