html5
kongjiea
通吃前后端如何?
展开
-
css3 的shake效果,css3抖动窗口 大部分手机浏览器都支持
无标题文档$(function(){ $("ul li").click(function(){ $("#btn").removeClass().addClass("shake"); var set = setTimeout(function(){ $("#btn").removeClass(); },1500) })})li{border:1px solid原创 2014-01-02 11:49:06 · 16789 阅读 · 1 评论 -
【基础html5 基础知识点】(全)
新增的结构标签section元素 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……。article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。header元素原创 2014-08-16 15:33:21 · 21833 阅读 · 0 评论 -
移动端webapp如何隐藏地址栏
1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。meta name="apple-mobile-web-app-capable" content="yes" />2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页面高度必须够高,核心代码如下:script type="text/javascrip原创 2014-09-19 16:26:43 · 16600 阅读 · 4 评论 -
移动H5前端性能优化指南
移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代转载 2015-02-27 14:11:55 · 1966 阅读 · 0 评论 -
html5新特性,你不知道的5个HTML5新功能
当你在人群中谈论到“HTML5”,你也许会感觉到,自己像一位异域舞者或独角兽,来到屋子中间,带有明显的“我很酷,我知道它”的意味。这不能说我们虚荣,多少年来,基本的HTML API一直没有任何发展,以至于当有一个小的新功能出现时,例如placeholder,都会让我们露出新奇的眼神。尽管新式的浏览器中实现了很多HTML5特征,但大部分程序员仍对一些小的、非常有用的API不了解或从未听说。本文中我将转载 2015-02-02 09:46:03 · 2746 阅读 · 0 评论 -
检测浏览器是否支持HTML5视频
function checkVideo(){ if(!!document.createElement('video').canPlayType){ var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!o转载 2015-05-29 16:41:32 · 731 阅读 · 0 评论 -
html5手机网站需要加的那些meta/link标签,html5 meta全解
一、大众机型常用meta标签name的设置1、name之viewport说明:屏幕的缩放content的几个属性: width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持; height – viewport 的高度 (范围从 22原创 2013-12-03 11:00:08 · 63274 阅读 · 13 评论 -
移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分1、 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方(function bottonm(){ if($(document).height()<$(window).height()原创 2015-06-18 11:46:36 · 108136 阅读 · 6 评论 -
移动端用input:file调用手机相册、摄像头、和sd卡的相册文档
兼容安卓微信调用摄像头 兼容安卓默认选择sd卡上的相册图片原创 2015-10-22 18:09:09 · 43361 阅读 · 8 评论 -
移动端web整理 移动端问题总结,移动web遇到的那些坑
http://www.cnblogs.com/PeunZhang/p/3407453.html#question_20meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari将网站添加到主屏幕快速启动方式,仅针对ios的safar转载 2015-09-07 11:50:33 · 8026 阅读 · 0 评论 -
解决移动端a:active伪类无效的方法
看来在iOS系统的移动设备中,需要在按钮元素或body/Html上绑定一个touchstart事件才能激活:active状态。document.body.addEventListener('touchstart', function () { //...空函数即可});原创 2016-03-21 10:29:54 · 4201 阅读 · 0 评论 -
移动端头部meta、link书写比较好的案例
http-equiv="Content-Type" content="text/html; charset=utf-8"> UI设计_软件界面设计_APP应用开发_交互设计_上海艾艺-3D虚拟展示 name="keywords" content="UI设计, 软件界面设计,html5开发,移动端UI设计,IOS开发,Android(安卓)开发,用户体验,交互设计,多原创 2015-11-24 10:34:28 · 1561 阅读 · 0 评论 -
html5学习笔记(-),html5新特性介绍教程
一、html5语义化二、HTML5新特性 1、HTML5新特性的浏览器支持情况 http://www.caniuse.com/#index 2、新的选择器 querySelector 获取单个元素 如: var obj=document.querySelector('.box');var obj1=document.querySele原创 2016-09-06 22:08:03 · 2126 阅读 · 0 评论 -
移动端某些浏览器cookie无法识别中文encodeURI 、 encodeURIComponent 、escape
问题描述比如qq浏览器无法识别中午 ,getcookie的时候为空那么在setcookie的时候进行编码,然后在getcookie的时候再解码编码的三个方法encodeURI 、 encodeURIComponent 、escape 他们的区别encodeURI主要用于直接赋值给地址栏时候:location.href=encodeURI("http:原创 2016-12-08 17:24:03 · 2339 阅读 · 0 评论 -
解决移动端特别是ios滑动卡屏 滑动卡顿
css属性解决-webkit-overflow-scrolling:touch;插件解决iscrolljroll2原创 2017-02-10 11:07:22 · 11936 阅读 · 1 评论 -
各大浏览器 CSS3 和 HTML5 兼容速查表
需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。CSS3 属性 可以看出,全盘支持 CSS3 属性转载 2014-12-24 10:21:20 · 1075 阅读 · 0 评论 -
各大浏览器 CSS3 和 HTML5 兼容速查表
需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。CSS3 属性 可以看出,全盘支持 CSS3 属性转载 2014-12-24 10:18:55 · 853 阅读 · 0 评论 -
html5 canvas 画图基本教程
#box{width:200px;height: 200px;border:1px solid #000;} canvas{border: 1px solid #DDD;} /*创建一个canvas对象,并且获取到canvas的上下文 - context,用来访问画布相关API*/var canvas = document.getElementById('mycanvas原创 2014-04-03 16:06:15 · 1483 阅读 · 0 评论 -
html5 表单元素美化
CSS3复选框和单选按钮美化 - 97站长素材网(www.97zzw.com) Checkbox Small Checkbox Big Radio Small Radio Big css 如原创 2014-03-26 15:52:00 · 4230 阅读 · 0 评论 -
html5画直线箭头
Text window.onload = function(){ arrow2("myCanvas",0,0,0,0,300,100) arrow2("myCanvas",0,0,200,200,150,150) arrow2("myCanvas",0,0,20,200,150,150) arrow2("myCanvas",0,0,100,0,50,100)原创 2014-04-13 13:54:57 · 20057 阅读 · 1 评论 -
【html5基础】HTML5 知识点
HTML5 知识点 (1)语义化标记 ,,,,,,,,,, (2)表单增强 ①新的INPUT类型: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, url ②新属性:原创 2014-08-16 15:53:42 · 1800 阅读 · 0 评论 -
【效果】html5给小树浇水,然后树长大的效果
用到的 浇水 /* animation */ .a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .bottle-fadeIn{-webkit-ani原创 2014-08-19 10:06:38 · 15314 阅读 · 3 评论 -
让ie支持html5的标签
让ie支持html5的标签方式一:引用google的html5.js文件,代码内容可以自己下载下来看。 将以上代码放到head标签区间方式二:自己coding JS搞定。 (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, articl原创 2014-09-17 14:08:33 · 1890 阅读 · 0 评论 -
html5手机摇一摇效果
HTML5 手机摇一摇var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');if(window.DeviceMotionEvent) { var speed = 25; var x = y = z = lastX = lastY = lastZ = 0; window.addEven原创 2014-11-25 10:48:47 · 7076 阅读 · 0 评论 -
监控mobile的横屏、竖屏
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为原创 2014-11-24 15:32:42 · 2276 阅读 · 0 评论 -
二、Mobile Web开发工具和开发框架
做为一个Mobile Web开发者,我们除了拥有真机外(这个对于大多数团队不现实呀,IT民工们真心买不起),更重要的就是先在模拟器/仿真器上来测试了。在此列举所需要的所有开发环境: SDK,仿真器,模拟器iOS SDK(XCode), 最好的IDE与仿真器(没有之一 )Android SDKOpera Mobile,最快的仿真器Opera Mini , 一个基于Java A原创 2014-11-24 15:26:46 · 956 阅读 · 0 评论 -
css3初始化属性,WebKit的CSS扩展(WebKit是私有属性)
1、-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。2、-webkit-line-clamp 是原创 2014-12-23 09:32:30 · 2473 阅读 · 0 评论 -
移动端弹出提示插件,自写移动端dialog插件
body,div,p,span{margin:0;padding:0;}body{ font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma; font-size:14px;}.btn-container{ width:300px; height:100px; margin:100px auto;}/*插原创 2015-01-12 16:01:38 · 12265 阅读 · 2 评论 -
移动端(html5)微信公众号下用keyup实时监控input值的变化无效
项目中有一处需求是,搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有,后来切换到中文输入法,问题出来了,不灵便了,后来在网上搜了下,找到了思路,主要是给搜索框注册focus事件,隔个时间去检索下,贴出代码 $(function () { $('#wd').bind('focus',filter_time); }原创 2014-10-17 14:51:44 · 28747 阅读 · 1 评论 -
移动端手机网站限制input只能输入数字
用input:tel属性解决原创 2014-10-17 14:42:54 · 42921 阅读 · 2 评论 -
js判断客户端是pc端还是移动端
function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var转载 2013-12-27 15:33:45 · 63812 阅读 · 0 评论