移动端(h5)开发笔记
1.禁止缩放+禁止缓存
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-store, must-revalidate" />
<meta http-equiv="expires" content="0" />
</head>
2.-webkit-定制css 
更多参考:http://www.cnblogs.com/radom/archive/2012/04/19/2457356.html
-webkit-touch-callout:none;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,.1);/*链接触感样式*/
3.获取浏览器及webview系统/版本信息
//MIUI
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; MI 2 Build/JRO03L) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Mobile Safari/537.36 XiaoMi/MiuiBrowser/2.1.1 //weixin
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; MI 2 Build/JRO03L) AppleWebKit/533.1 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.4 TBS/025440 Mobile Safari/533.1 MicroMessenger/6.2.2.54_rec1912d.581 NetType/WIFI Language/zh_CN //QQ
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; MI 2 Build/JRO03L) AppleWebKit/533.1 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.4 TBS/025442 Mobile Safari/533.1 V1_AND_SQ_5.7.2_260_YYB_D QQ/5.7.2.2490 NetType/WIFI WebP/0.3.0 //UC
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-CN; MI 2 Build/JRO03L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/10.4.1.576 U3/0.8.0 Mobile Safari/534.30 //weibo
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; MI 2 Build/JRO03L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 Weibo (Xiaomi-MI 2__weibo__5.4.0__android__android4.1.1) //SohuNews
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; MI 2 Build/JRO03L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 SohuNews/5.2.3 BuildCode/95
4.PC端mousemove和移动端的touchmove target的区别
一个划线程序,div.que划线到div.ans,需要判断是否move到了目标位置。
PC通过判断mousemove的e.target做了实现,但是到了pad上无效了。pad上无论手指移动到什么位置,touchmove的e.touches[0].target始终为touchstart时的target。
如此一来,pad上的实现就必须要通过判断move的坐标是否落在目标坐标范围内了。
思考:
得理解pad和PC的交互区别,PC上可以判断鼠标经过得知经过了那些元素。但是pad上,手指头经过肯定是,按下+移动,类似于PC上的拖拽,这样的话,事件目标肯定是当前拖拽的元素,不会跟着move而改变的。
webview
1.文件选择
    Android原生不支持fileInput的文件选择
移动端(h5)开发笔记的更多相关文章
- 移动端H5开发自适应技巧
		移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ... 
- 移动端H5开发遇到的问题及解决方法
		本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ... 
- 移动端h5开发相关内容总结css篇--笔记
		原文参考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ 1.开发移动端,头部必要的配置<meta name="viewport&quo ... 
- 移动端 h5开发相关内容总结(三)
		之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ... 
- 转---移动端 h5开发相关内容总结——CSS篇
		作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ... 
- 移动端 h5开发相关内容总结——CSS篇
		1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ... 
- 移动端 h5 开发相关内容总结——JavaScript 篇
		1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ... 
- 移动端H5开发 (滑动事件)
		最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ... 
- 移动端H5开发 之 渲染引擎
		渲染引擎 浏览器渲染引擎,负责解析 HTML, CSS,javascript的DOM部分,如桌面浏览器一般手机端也有4个比较重要的渲染引擎 Gecko,Trident,WebKit,Blink . 黑 ... 
随机推荐
- MAC显示文件夹路径
			MAC显示文件夹路径 终端命令 1.显示路径:defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Fi ... 
- requireJs--简单的使用方法
			简单使用: <!-- index.html部分 data-main 为入口 --> <script data-main="js/app.js" src=" ... 
- 协议分析 - DHCP协议解码详解
			协议分析 - DHCP协议解码详解 [DHCP协议简介] DHCP,全称是 Dynamic Host Configuration Protocol﹐中文名为动态主机配置协议,它的前身是 ... 
- Lesson 12 Goodby and good luck
			Text Our neighbour, Captain Charles Alison, will sail from Portsmouth tomorrow. We'll meet him at th ... 
- .NET单元测试的艺术-3.测试代码
			开篇:上一篇我们学习单元测试和核心技术:存根.模拟对象和隔离框架,它们是我们进行高质量单元测试的技术基础.本篇会集中在管理和组织单元测试的技术,以及如何确保在真实项目中进行高质量的单元测试. 系列目录 ... 
- kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件
			小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ... 
- 我如何介绍 Microservice
			这篇文章转自我的 Github blog 一天我司招财猫姐(HR 大人)问我,你给我解释一下 Microservice 是什么吧.故成此文.一切都是从一个创业公司开始的. 故事 最近的创业潮非常火爆, ... 
- Redis初级介绍
			1 什么是Redis Redis(REmote DIctionary Server,远程数据字典服务器)是开源的内存数据库,常用作缓存或者消息队列. Redis的特点: Redis存在于内存,使用硬盘 ... 
- 关于CefSharp的坎坷之路
			项目背景: 公司的XX产品需要升级和以后支持多平台的使用.因为之前项目是由WPF实现的.目前以后想作为Html5来展示页面. 因为涉及到整体更改遇到的问题较多以及其他原因,所以只是内部内容区域先替换为 ... 
- React 生命周期
			前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ... 
