浅谈h5移动端页面的适配问题
时间： 00:55:33
&&&& 阅读：60750
&&&& 评论：
&&&& 收藏：0
标签：一、前言
& & & & 昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为响应式很牛逼，尤其是在不懂前端的人眼中，一味的追求响应式布局，我觉得复杂的布局项目做响应式还不如做二套样式，因为响应式的样式混在一起真的维护起来是恨费劲的。可能我说的不对，但是发表 一点点自己的看法。说道这里就想说一下移动端的布局，有很多人就是想把手机端得程序兼容ipad，我就觉得这个很不可思议为什么要这么做得，命名手机端的和ipad的设计模式以及操作样式都不一样。为什么还要把它们弄做一起的，维护起来的比较麻烦。还不如做成两套样式或者ipad直接让pc来兼容。pc的设计方式和ipad还是比较接近的。如果非要用移动的样式稍加改成ipad，个人感觉这种方案极不好。不知道大家的看法如何？& & & & 接下来我就说一下布局方式吧，目前比较流行的布局方案就是百分表啦。貌似百分之九十以上得触屏版都是这么做得，这种做法可以说是不会出现什么大问题，但是也会有几个小的问题，例如屏幕大的手机和比屏幕小差距之大，尤其是在比价斤斤计较的设计面前你是无法说清楚的，她会一直问，为什么这两个手机的布局差距这么大呢？其实我想说，我他妈怎么跟你解释呢。。。此处省略1000个字。在就是布局起来也比较麻烦，真心麻烦。当然肯定有更好得方案拉，于似乎我就想出了一个比较好的解决方案，顶宽布局。
二、320定宽布局
& & & & 当时我也想了很多方法，但是一直没有好的解决方案，曾经看了,当时看完哇塞，这不是正式我想要的嘛。可是尝试了多次发现这个方法的兼容性有很大的问题。最后还是放弃拉。于是乎我就开始琢磨，怎么才能更好得兼容所有的机子呢。就想到了缩放，viewport不就干这个的嘛。二话不说就尝试一下viewport里面得一个属性initial-scale,思想很简单，在页面渲染的时候我计算一下手机的宽度，然后我在跟我顶宽布局的宽度一做比较。那么不就可以实现了自动缩放嘛。可是我尝试的结果是，日的，这个属性各个浏览器支持不好。其实我觉得如果这个属性大家都能统一的支持，那就是完美的解决方案拉。可是谁让我们是程序猿呢。只要靠自己吧，要不然jquery也不会诞生。我们就是要在一个个坑中走过来呀。
& & & & &接着就想到了scale哈哈，css3里面得缩放，不过后来发现用这个字体什么的会虚掉。所以想起了zoom属性，从这可以看出来我也是干过pc的，当时的ie6的清楚浮动有一种方式就需要加一个zoom为0，这个就不错嘛。话说回来了。这个在nativeapp里还是没有太大问题得。不过还是有一点小坑，就是计算margin以及scroll的时候就出来个缩放系数的问题。不过还好，只要你把常用的组件写好除以或者乘以这个缩放系数就可以搞定啦哈哈。这种方式就可以解决小伙伴们百分比布局的痛苦拉。尤其是不用去计算那些百分值多少百分值多少拉。废话不说啦，上代码，
1 &!DOCTYPE html&
&meta http-equiv="content-type" content="text/ charset=UTF-8"/&
&meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=no"/&
&title&GreatBoy&/title&
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
padding:0px;
font-family: "Arial";
font-size: 100%;
margin: 0px auto;
display: none;
width:<span style="background-color: #f5f5f5; color: #px;
margin: 0px auto;
position: relative;
/*-----css content start-----*/
width:<span style="background-color: #f5f5f5; color: #%;
display: block;
&div id="wrapper"&
&div class="nav"&&img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/&&/div&
&div id="container"&
&div id="user"&用户信息&span id="userinfo"&&/span&&/div&
(function() {
var scale = 1,
$wrapper = document.getElementById(‘wrapper‘),
$body = document.getElementsByTagName(‘body‘)[0],
windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase(),
setScale = function(scales) {
if ($wrapper.style.zoom === undefined) {
$wrapper.style.margin = ‘0px‘;
$wrapper.style.transformOrigin = ‘top left‘;
$wrapper.style.transform = ‘scale(‘ + scales + ‘)‘;
$wrapper.style.MozTransformOrigin = ‘top left‘;
$wrapper.style.MozTransform = ‘scale(‘ + scales + ‘)‘;
$wrapper.style.zoom =
$body.style.display = ‘block‘;
if (deviceAgent.match(/(iphone|ipod|android|windows\s*phone|symbianos)/)) {
if (window.localStorage && window.localStorage.getItem(‘scale_jumei‘)) {
scale = window.localStorage.getItem(‘scale_jumei‘);
scale = parseFloat(windowWidth / 320);
if (windowHeight & windowWidth) {
window.localStorage && window.localStorage.setItem(‘scale_jumei‘, scale);
//微信2.3版本的处理(2.3版本有一个bug就是获取宽度不准确)
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 1;
if ($wrapper) {
setScale(scale);
} catch (e) {
scale = parseFloat(windowWidth / 320);
if ($wrapper) {
setScale(scale);
89 &/html&
& & & & &上面代码很简单大家一看就懂。这种方式做一个简单的页面以及平时做些活动啥得是没问题的。也不需要在算百分比是多少啦，直接写死宽度320布局就好啦，先说一下我得布局方式，就是让设计做640的图片。然后我们布局按照320来做就好，图标什么的让设计出2x图或者3x图，也就是做2倍icon或者3倍icon。2倍的icon目前在6plus上面还是会有点虚得。所以可以选择3倍的icon，毕竟图标什么的也不是太大。说一下这种方法的缺点吧。缺点是有的浏览器不支持zoom属性，例如火狐，那就只能用scale了。还有一个缺点就是在计算某些元素的高度什么需要一个缩放系数的问题。毕竟有缩放的东西在里面。当然坑还是有解决方案的，下面就说一下我的顶宽布局最终解决方案。
三、顶宽布局之最终解决方案
& & & & &为了解决上面布局的坑，我就弄了一个终极的解决方案，这个方案目前肯定也有一定的坑，不过貌似不是很大，毕竟没有太多的人反馈。上面的方案也用了很久，目前没有特别大得问题，尤其是在我们app里面没有出现过重大事故。& & & & 接着说一下最终方案，就是通过font-size缩放，这需要用到一个rem的尺寸，大家没事网上一搜就知道了。这个1rem目前等于16px，那么我上面的320布局岂不是可以搭建成宽度为20rem的尺寸，然后我里面所有的元素都可以用rem来代替px。这样我不就可以通过在html上font-size进行缩放了嘛,其实就是这样做的就ok。这里有一个转换，就是要把css里面的px按照1rem = 16px的规则都替换成rem。这样就ok了。这个方案目前的缺点就是需要编译一下css样式和不允许你写内联样式，不允许写内联样式的主要原因是要不你html也得进行编译替换拉。目前我们得解决方案是在开发的时候我们还是按照320的布局方案来走。等发布到线上的时候做一个整体的gulp构建px替换成rem。于似乎就解决了大部分得问题。目前这个解决方案对我来说还是比较理想的。可能某些地方还有问题。不过也算一种尝试吧，有什么问题大家可以一起解决。好了上一个段代码& & & &&
1 &!DOCTYPE html&
&meta http-equiv="content-type" content="text/ charset=UTF-8"/&
&meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=no"/&
&title&GreatBoy&/title&
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
padding:0px;
display: none;
width:10rem;
&div class="nav"&&img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/&&/div&
&div id="container"&
&div id="user"&用户信息&span id="userinfo"&&/span&&/div&
(function(win) {
var doc = win.document,
scale = 16,
$body = doc.getElementsByTagName(‘body‘)[0],
$html = doc.getElementsByTagName(‘html‘)[0],
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase();
if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {
if ( window.localStorage && window.localStorage.getItem(‘scale_greatboy‘) ) {
scale = window.localStorage.getItem(‘scale_greatboy‘);
scale = parseFloat(windowWidth * 16 / 320);
if (windowHeight & windowWidth) {
window.localStorage && window.localStorage.setItem(‘scale_greatboy‘, scale);
}catch(e){
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 16;
$html.style.fontSize = scale + ‘px‘;
$html.style.display = ‘block‘;
window.onresize = function(){
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerW
scale = parseFloat(windowWidth * 16 / 320);
$html.style.fontSize = scale + ‘px‘;
scale = parseFloat(windowWidth * 16 / 320);
$html.style.fontSize = scale + ‘px‘;
$html.style.display = ‘block‘;
$body.style.width = ‘20rem‘;
})(window);
70 &/html&
& & & & 总结一下，这个解决方案目前的缺点。1、css需要编译。2、动态计算的时候一定不要把js里的高度宽什么的写死，一定要动态获取。3、在不支持rem的浏览器上会有问题。 目前这也是我想到的最好得解决方案，由于技术水平比较低哈哈。所以代码质量不高，有什么问题大家可以一起交流讨论，如果上面代码大家有疑惑可以看一下线上的页面原代码，，对啦看淘宝的源代码，貌似淘宝的首页是用fontsize缩放解决的。不过没有看到他们是怎么计算的，有空研究一下。不过我觉得淘宝首页这个自己实现的滚动条还是比较牛，至少在我们公司领导是不允许这么实现的，因为小米3的android机子看了一眼还是会卡顿。。。。太晚了，要去睡觉啦，如果有错别字什么的大家见谅（语文功底比较差哈哈）。
& & & &&标签：原文地址：http://www.cnblogs.com/greatboy/p/4336187.html
现在什么响应式，什么适配，记得当初的html5，为用不用他而感到发愁，而现在来说，简直火爆的不行啊，像内顶级前端公司切图网（www.qietu.com），和电信、路虎、雪佛兰、多美滋等公司合作的项目上千例中，多数都应用到了html5
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！客服热线：400-995-7855
当前位置：&&&
H5制作又一利器：分分钟制作一个H5页面
& 16:47&&来源：木木seo博客&
　　在当下&移动+社交&的传播时代，HTML5营销凭借简单快捷、灵活炫酷的特性吸引了大批用户认可和使用，并逐渐形成了移动营销的一个新热点。
　　一份H5海报通常涵盖文字、图片、音乐(声音)、视频、链接等多种元素，以富媒体形式打造多种用户使用场景，能够实现企业宣传、促销活动、产品介绍、预约报名、会议组织、收集反馈、微信增粉、网站导流等多种营销目的。
　　在市场对H5普遍趋之若鹜的形势下，也有人为其背后的技术支撑有所踌躇顾虑：没有专业的设计和技术团队如何制作H5特效动态页面?
　　我想这早就不是问题，市面上已经有很多H5制作工具和平台，下面要说的是又一H5制作利器，个人DIY H5海报工具&&ME微杂志。通过ME微杂志平台，你可以在零代码基础上完全可以轻松制作出一份高大上的H5海报。借助其超强的平台模板，你只要换上几张图，敲几个字，选自己喜欢的音乐或视频...一个不错的H5页面就出来了，非常简洁简单。
　　ME微杂志内设&创意&&生活&&文艺&&杂拌儿&等类型模板，不管是接地气的生活家，还是热爱写情诗的文艺青年，在这里总能找到满足你表达需求的个性模板，分分钟就可以创造具有时尚感、令人耳目一新的邀请函、简历、写真、明信片、祝福贺卡等。基于海量模板，产品推广、活动邀请、招聘、社团纳新、签到等应用场景在ME平台上都可以轻松打造，和其他H5制作工具一样，应有尽有。
　　而且，ME微杂志还有移动版的App端H5制作平台，ME APP采用拖拽式操作，一拖一拽，即可编辑动态海报，简单配置，实现多种动画效果，所见即所得，一分钟即可学会，三分钟便能完成。无论身在何处打开APP即可使用，简单快捷，不在电脑旁边同样轻松完成H5页面的制作。
　　用了ME微杂志一段时间，发现其首页背景图每日一换，而且张张简约精致，充满故事感。&一个人就是一个故事，我们试图采用最佳的方式(H5)将故事阐述得简约而精致。&这是ME对其产品自身的要求与定位。
　　在提供海量功能性实用模板来解决用户的日常需求外，一张纯粹的照片在这里也可以轻易地被包装成故事，在精美的设计渲染下，甚至可以营造出时尚大片感，满足用户个性表达自我的心理需求，自此开启自我品牌营销。
　　目前，ME在继续深化H5制作工具职能外，正以海量作品为基础逐步向广大用户提供内容阅读服务，不管你是漫画控、小说迷，还是追剧狂人、数据图表依赖者，在未来你都将在ME平台上寻找到你想看的内容。同时以内容为基础，ME正逐步打造基于H5内容的SNS社交平台，导入及推荐与个人用户兴趣和关注点相近的内容及其他用户。
　　就写到这，不多说，有兴趣的可以试试!!
　　木木博客(http://blog.sina.com.cn/mumuhouzi)，公众号：mumuseo，一个新鲜、有趣、有料的学习干货平台!有更多互联网营销，注重网络推广策略、营销引流技巧及思路!欢迎交流。
扫一扫关注A5创业网公众号
责任编辑：&&&/&&&作者：木木
风平浪静的工作日下午，网易云音乐毫无预兆的……又刷屏啦!一则心理解答类H5为何能够引发大规模刷屏?精准洞察社交心理，促进分享的文案；以音乐为主要元素，发挥自身优势的听觉效果；多种颜色海报+名字露出，突出独家定制感的视觉效果……
“如今要渲染一张图片，你还会写代码吗?不，你会打开Photoshop。而编辑H5页面，你打开的就是iH5。”孟智平说。但他的期望不只限于营销，对iH5，他还计划了一个更大的未来。霍炬曾说：互联网已经完蛋了。巨头垄断应用分发，社交网络和APP圈地为王，流量只进不出。一切流向BAT的互联网，还有是去中心
8月29日，一支名为《“小朋友”画廊》的H5和五彩斑斓的画作被疯转刷屏。这背后，是腾讯公益、深圳市爱佑未来慈善基金会和上海无障碍艺途(WABC)联合出品的线上线下互动公益项目“用艺术点亮生命”。点开H5，在《Vincent》的动人旋律中，36幅充满生命力的作品随点击依次出现。它们出自一群患有自闭症、
记得小时候刚学计算机时还是使用MS-DOS操作系统，家人帮我买了一本厚重的参考书，里头收录所有DOS指令，非常详尽，而这本书也对我产生不小影响，我知道学习任何东西都必须要有正确的参考手册，才能够让学习过程更全面扎实。虽然网络上有许多教学文件，但碍于篇幅都只能够以最短快捷方式来帮你达到目的，对于一些较
最近两年，互联网+的概念可谓十分火爆。所谓“互联网+”，其实质就是把互联网大平台和各行各业进行有机结合，建立一个新的商业生态。对于传统企业来说，互联网+的第一步就是有一个企业网站，将自己推广出去。
A5创业网（公众号：iadmin5）7月10日报道，近日，针对此前大众点评涉嫌泄露用户隐私一事，大众点评方面作出回应，道歉并进行整改。
A5创业网(公众号:iadmin5)7月9日讯，据相关媒体报道，大众点评被网友举报涉嫌泄露用户个人信息的行为，当用户通过微信登录后，将用户的个人浏览关注，甚至点赞的信息分享给别的网友。对此大众点评对此作出了整改措施。
A5创业网（公众号：iadmin5）7月9日报道，近日，有媒体报道称，美团旗下的大众点评号召用户使用微信登录、与好友分享动态。大众点评微信登陆时，会出现微信好友去过的餐厅和酒店，被指暴露用户行踪，泄露隐私。
A5创业网（公众号：iadmin5）7月9日报道，近日广东中山的黄先生通过微信给表妹转账，结果不小心将近9万元转错了人，由于不知道对方真实姓名和账户信息，无法立案。
最近有位网友通过微信进行转账，由于粗心大意，把近8万元发给了错的人，自己遭到拉黑和删除好友。为此该网友请求腾讯公司提供相关信息，用以讨回钱财，但是腾讯并没有配合，这是问什么呢?
成都鑫易时代--APP开发,系统研发,集领先技术为一体的优秀科技型企业.成都鑫易时代网络科技有限公司(简称鑫易时代)创立于2014年8月。企业坐落于美丽的天府之国成都，15年受国家招商引资进入国家CBP金融城办公。
这与Versa团队运用先进的思维理念，将人工智能新算法conceptNet基础理论与艺术创作相结合是分不开的。Versa作为一款年轻态的视觉创作APP，将艺术融入生活，普遍适应了当下人们的心理与需求。
中国游泳国家队队长，伦敦奥运、里约奥运游泳冠军孙杨，宣布与今日头条达成官方新媒体战略合作，并正式入驻今日头条微头条和抖音短视频，更多互动展现体育人气王的多面风采。
A5创业网(公众号：iadmin5)7月9日消息，小米今日正式于香港上市，股票代码为“01810”，发行价定为为17港元，但开盘惨遭破发。
小米集团今日登陆港交所，小米创始人雷军发表致辞。在致辞过程中，雷军一度哽咽，他回顾了小米的创业历程，表示在8年前，自己希望用互联网的方法做手机是一个疯狂的想法。
创业好项目
网络文学二十年： 意气江湖载酒行
扫描二维码关注A5创业网了解最新创业资讯服务
&徐州八方网络科技有限公司&版权所有&
举报投诉邮箱：
扫一扫关注最新创业资讯H5移动营销：下一个飞起来的猪|Html5|移动营销_新浪科技_新浪网
H5移动营销：下一个飞起来的猪
　　新浪科技讯 随着移动互联网的井喷式发展，从2014年开始，营销方式中以传播之首的姿势屡屡刷爆朋友圈的H5页面首当其冲。“围住神经猫”在微信朋友圈上线3天的时间便创造了用户500万，访问量超1亿的神话。H5移动营销价值也迅速大放光彩并成为未来的发展趋势，各行业对此也投入较大的关注和期望。
　　H5页面已经成为众多品牌数字营销活动中的必备，很多企业选择用微信端的H5页面承载自己的移动营销活动，在微信里传播企业简介、企业推广、企业新产品发布、企业互动营销活动等。
　　在过去一年里， H5移动场景的营销案例层出不穷，成为营销界关注的新宠。2015年H5移动营销的走势？各行业如何紧跟节奏利用H5进行营销？媒体及资本如何看待H5移动营销的价值？如何结盟而赢？……
　　针对这些问题，新浪移动联盟BD总监荣蓉蓉本月组织了商务社交午宴，邀请H5移动营销生态圈各个环节的专家，从H5移动应用场景产品技术、客户、用户、媒体、资本、营销的角度深入探讨、交流行业最新的资讯、碰撞最新的合作方式，构建彼此共赢的社交环境，并最终促进H5移动营销的良性发展。本次活动主要嘉宾有：易企秀联合创始人郭鑫，新浪程序化购买总经理谷金芳、蓝鲸传媒COO李武，新浪移动内容总监丛松、今日头条市场总监杨亨宝，Google大中华区战略合作部总经理，跨界新东方市场负责人、九九艺术董事长及金球华地资本总经理等。
　　易企秀的联合创始人郭鑫介绍了H5应用场景的前世今生，易企秀致力于移动场景的开发和面向大众的服务。在场的新东方就是他们的忠实客户之一。郭鑫表示，这是一场非常有意义又有趣的沙龙活动，给了他们从营销环节的多角度了解需求的机会，对他们的成长帮助很大。
　　蓝鲸传媒COO李武讲了蓝鲸的核心平台及未来规划方向，蓝鲸是基于财经记者的工具社区网站，目前已有超过4500名实名记者和自媒体人，媒体人的力量对H5的传播也是相当大。
　　Google商务总监耿倩进行了AdSense Native Ads的介绍，大家都对这种原生广告表现出浓厚的兴趣。
　　九九艺术网董事长杨凯在现场向大家提问，如何通过H5和网络媒体的整合宣传，在颠覆传统营销模式的情况下，将传统企业的内容进行包装、传播，以产生最大的品牌音量？对此，在场的各位嘉宾从技术、运营、媒体角度提供了各自的营销解决方案。
　　最后，新浪移动联盟BD总监蓉蓉向大家介绍了新浪移动联盟的最新商业规划蓝图，新浪移动联盟在未来将对开发者、广告主、自媒体人进行资源整合，打通广告主、广告交易平台、移动流量联盟、媒体内容联盟的生态圈。新浪给予合作伙伴的将不仅仅是直接的收益，还会积极扶持生态圈APP开发者及自媒体人创业项目。新浪移动联盟将会借助自身平台优势，为众多的合作伙伴创造沟通桥梁，组织商务交流，合作洽谈，发掘无限可能……敬请关注新浪移动联盟的后续系列沙龙活动。
　　扫一扫，一起坐看风云变幻。扫描下方二维码关注新浪科技官方微信(也可微信搜索：techsina或新浪科技)。
文章关键词：
&&|&&&&|&&&&|&&
您可通过新浪首页顶部 “”， 查看所有收藏过的文章。
，推荐效果更好！
看过本文的人还看过此问卷处于停止状态，仅供浏览，请勿填写！&&&&
问卷正在加载中，请稍候...
如果由于网络原因导致此框一直不消失，请重新刷新页面！
1.您现在的学历*初中高中本科研究生已工作其他2.您的性别*男女3.您见过微信移动端H5页面的宣传吗？*经常见到偶尔见到从未见过4.您喜欢H5页面的滑动动效效果吗？*非常喜欢比较喜欢没有感觉不喜欢5.您能接受的H5页面页数范围*1-3页3-5页5-8页8页以上6.通过H5页面来进行腾讯公司宣传您会关注吗*非常关注比较关注，看到会点击进去与我无关7.您介意自己的个人海报上有腾讯或者其他公司的logo、二维码等内容吗*非常介意感觉还好，位置摆放恰当可以接受完全不可以接受8.生成自己的海报您会常以哪种方式进行分享*&【多选题】微信朋友圈微信好有qq好有qq空间微博facebook等国外社交网站其他9.如果通过H5页面生成了个人海报，您会分享一些社交社区吗？*非常愿意分享依据海报效果而选择是否分享不会分享10.你会在微信朋友圈关注创新创业的信息吗*非常关注，会主动搜索比较关注看到会点击进去与我无关11.您比较喜欢生成个人宣传海报是什么风格的*国际杂志风格萌萌哒的风格简约海报风格无所谓，好看就行选项4512.您认为以文字为主的H5公司宣传页面能接受页数上限*1-2页3-4页5-6页6页以上
&提供技术支持　最近刚做完一个移动端的项目，产品之无敌，过程之艰辛，我就不多说了，记录下在这个项目中遇到的问题，以防万一，虽然这些可能都是已经被N多前辈解决掉了的问题，也放在这里，算是为自己漫漫前端路铺了一颗小石子儿吧，也在文末留下自己未能解决的疑问，希望看到的朋友能解惑。
　　都知道做移动端的开发，在电脑上调试好了的东西，放在手机里可能真的秒秒钟就炸了，我发誓绝对没想到炸的这么快。。。
　　1、IOS监听不到input框输入中文的keyup事件
　　这个小标题好像不太明确，大概就是，APP中有一个列表显示的页面，页面上有个搜索功能，使用keyup监听input框，每一次keyup都去检索一下缓存数据有没有符合的数据，然而、然鹅，IOS上并没有能在每一次keyup都去检索，经过各种查发现，IOS的输入法（不管是第三方还是自带）能检测到英文或者数字的keyup，检测不到中文的keyup，（至于标点那些，就没有深究了），在输入中文之后需要点击回退按键，才会开始搜索，我自己能想到的办法就是定时检测setInterval，我也只能想到这办法了，但是总觉得不太好，于是搜索到了这个办法（http://blog.csdn.net/lytlx/article/details/）， 把keyup事件换成“input”和“propertychange”事件。
　　oninput 是&&的标准事件，对于检测&textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。&事件在主流浏览器的兼容情况如下：
　　&事件在 IE9 以下版本不支持，需要使用 IE 特有的&onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
　　在监听到&&事件后，可以使用 event 的&propertyName 属性来获取发生变化的属性名称，这样看来，oninput & onpropertychange 似乎是监听输入框值变化的最佳方案。
　　原来的代码：
　　$(".ui-searchbar-input input").keyup(function () {　　　　////　　});
　　修改后的代码：
　　$(".ui-searchbar-input input").bind("input", function () {
　　　　////
　　这样一改之后，IOS也能正常啦~~~~
　　2、使用touchstart、touchmove、touchend导致页面不能滑动
　　页面上有个水滴状的图片，要求水平拖动修改余额显示，自然而然想到的就是用touchstart、touchmove、touchend来搞定了，由于是初次使用，免不得会偷懒，从网上找了一些使用代码来缝缝补补，改成自己想要的效果，以下是初始代码，也就是导致页面不能滑动的罪魁祸首：
　　$("#img-balance").on("touchstart", function (e) {　　　　var touches = e.touches[0];　　　　oW = touches.clientX - $(this).offset().　　　　oH = touches.clientY - $(this).offset().　　　　$(document).on("touchmove", function (event) {　　　　　　event.preventDefault();　　　　}, false);　　});　　$("#img-balance").on("touchmove",function(e){　　　　var touches = e.touches[0],　　　　　　oLeft = touches.clientX - oW;　　　　if (oLeft & 20) {　　　　　　oLeft = 20;　　　　} else if (oLeft & document.documentElement.clientWidth - 45) {　　　　　　oLeft = document.documentElement.clientWidth - 45;　　　　}　　　　$(this).css("left", oLeft + "px");　　　　mainModule.showBalance(0);　　});　　$("#img-balance").on("touchend",function(){　　　　$(document).off("touchmove", function (event) {　　　　event.preventDefault();　　　　}, false);　　});
　　以上代码能完成我想要的效果，在电脑上玩儿的好好的，结果放在手机上就跪了，原来可以上下滑动的页面，只要一滑动图片，页面就不能上下滑动了，再检查了一下代码，表示完全不清楚为什么要在touchstart和touchend里面绑touchmove事件，这可能也是拷别人代码的弊端吧，因为不知道原因，索性就把那两段代码给删了，结果页面莫名其妙的就满血复活了，以下是修改后的代码：
　　$("#img-balance").on("touchstart", function (e) {　　　　var touches = e.touches[0];　　　　oW = touches.clientX - $(this).offset().　　});　　$("#img-balance").on("touchmove",function(e){　　　　var touches = e.touches[0],　　　　　　oLeft = touches.clientX - oW;　　　　if (oLeft & 2) {　　　　　　oLeft = 2;　　　　} else if (oLeft & document.documentElement.clientWidth - 35) {　　　　　　oLeft = document.documentElement.clientWidth - 35;&　　}&　　$(this).css("left", oLeft + "px");　　mainModule.showBalance(0);　　});
　　因为删掉off代码之后touchend里面几乎没有东西了，索性就把touchend也删了，发现并不影响效果，就偷着乐了，后经查证发现，页面不能滑动，就是因为那个event.preventDefault()阻止了事件的默认行为（页面滑动？？？），所以，把它删掉就好了。
　　3、部分手机滑动不流畅
　　页面中的滑动刷新使用的是iscroll，郁闷的是我周边的所有人的手机滑起来都是顺畅的不要不要的，只有我的，完全划不动，卡得抓狂，鉴于只有我的手机有这个问题，所以我把它放在了项目的最后来解决，甚至抱着只有我一个覆盖率或许可以不修复这个问题的小侥幸，现在想想真是惭愧（主要是我旁边的大牛说，“你要知道有一个你，就有千千万万个你”，你赢了）。
　　在网上查的时候发现还真是有千千万万个我，发现很多人都遇到过这个问题，其中有我觉得可信度较高的知乎（https://www.zhihu.com/question/）、CSDN（http://blog.csdn.net/bbsyi/article/details/ ，http://blog.csdn.net/ml/article/details/）等，还有一些不知名网站，都给出评论说可行的解决方案，无外乎就是以下几种（多是知乎总结出来的）：
　　　　1）&iScroll v5.1.3 & & &momentum: true （我用的iscroll的版本没这么高，所以就没有试过这种方法，不知是否可行）
　　　　2） 关闭probeType属性 （传说是因为这个启用监听滚动状态的很耗性能，关闭这个属性滑动就会流畅很多）
　　　　3）给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0);
　　以上3种方式，我试过后两种，项目中的iscroll初始化为：
　　　　　　_myScroll = new IScroll('#wrapper', {　　　　　　　　probeType: 3,　　　　　　　　mouseWheel: true,　　　　　　　　click: true　　　　　　});
　　wrapper中的DOM为：　
&div id="wrapper"&　　&div id="scroller"&　　　　&div id="scroller-pullDown"&　　　　　　&span id="down-icon" class="icon-double-angle-down pull-down-icon"&&/span&　　　　　　&span id="pullDown-msg" class="pull-down-msg"&下拉刷新&/span&&　　　　&/div&　　　　&div id="scroller-content"&　　　　　　&div class="div-list"&　　　　　　&/div&　　　　&/div&　　　　&div id="scroller-pullUp"&　　　　　　&span id="up-icon" class="icon-double-angle-up pull-up-icon"&&/span&　　　　　　&span id="pullUp-msg" class="pull-up-msg"&上拉刷新&/span&　　　　&/div&　　&/div&&/div&
　　先是第三种，给scroll元素增加css样式，scroll元素是#scroller，上午做测试的时候用的是#scroller-content（啊啊啊啊啊！！！）现在才发现元素选错了，不知道是不是这个原因导致的第三种方法没有生效（存疑）。
　　第二种方法，注释掉实例化时的probeType属性，然而发现，并没有什么用。。。于是又开启了茫茫网络上的捞针行动。
　　最终，在CSDN（http://blog.csdn.net/ml/article/details/）上找到了可行办法：
　　　　document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
　　偶，这中间还有个小插曲，为了解决这个滑动问题，一度傻逼得怀疑是不是没有写fastclick的原因，后来加上了并没有解决问题，也忘记了删掉，还导致后面的a标签需要点击多次才能跳转链接的问题，郁闷。。。
　　加上了这句代码之后，我的手机页面终于也是顺顺畅畅的了，哈~舒心~就喜欢遇到这种花时间就能解决的问题
　　以下是问题：
　　1、在解决touchstart、touchmove、touchend引发的问题的时候顺带解决了一个不知名bug，这个页面上有个输入框，每当输入框开始输入数据后页面就会白屏，只留下孤独的光标在那里闪烁，输入点击完成后页面又显示出来了，这个只是IOS上的问题，奇怪的是，还没有开始找原因，解决了页面卡死事件后这个问题也莫名其妙的不见了，简直灵异。。。
　　2、解决最后一个问题的时候因为傻逼加上了fastclick，又引发了我的头脑风暴，fastclick能够解决移动端的300ms延迟问题，那按理说我加上了之后点击应该比之前反应快一点才对，为什么反而需要多次点击才能跳转链接呢？？？？
　　做这个总结的时候已经是项目发版本的晚上8点，加班狗已哭晕在厕所，这一次的项目我学到不少好东西，虽然连加了两周的班，毕竟无欲无求，也就无所谓了。
阅读(...) 评论()}