移动端页面小结
前不久,做了移动端的需求,移动端真是有好多坑,下面我记录下我遇到的问题:
1、高度占满整个屏幕需要加如下样式:
html{height:100%;};
2、官网zepto.js默认不支持animate函数,需要自己去有选择的添加插件,网址如下:
http://github.e-sites.nl/zeptobuilder/
3、zepto.js不支持scrollTop(返回顶部平滑效果),需要自己写下js效果:
方法一如下代码:
function scroll(selector, animate, viewOffset) { $('body').scrollToBottom (0, '200'); } $('.go_top').click(function(e) { e.preventDefault(); scroll( $('#wrap'), true, 30 ); }); $.fn.scrollToBottom = function(scrollHeight ,duration) { var $el = this; var el = $el[0]; var startPosition = el.scrollTop; var delta = scrollHeight - startPosition; var startTime = Date.now(); function scroll() { var fraction = Math.min(1, (Date.now() - startTime) / duration); el.scrollTop = delta * fraction + startPosition; if(fraction < 1) { setTimeout(scroll, 10); } } scroll(); };
方法二如下代码:
function scroll(scrollTo, time) { var scrollFrom = parseInt(document.body.scrollTop), i = 0, runEvery = 5; // run every 5ms scrollTo = parseInt(scrollTo); time /= runEvery; var interval = setInterval(function () { i++; document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom; if (i >= time) { clearInterval(interval); } }, runEvery); } $('.go_top').click(function () { scroll('0', 200); });
返回顶部按钮隐藏显示代码:
$(window).scroll(function(){ if($(window).scrollTop()>100){ $(".go_top").removeClass("none"); } else{ $(".go_top").addClass("none"); } })
4、<input type="text" />文本框输入文本不换行,要想实现换行效果可以用div代替,代码如下:
<div class="fl evalute_txt" contenteditable="true"></div>
5、若是只有一行几列情况,可以用display:-webkit-box属性,若是多列 每行宽度不一样,导致不整齐。
补充:
6、判断ios设备的js代码:
var ios =/ipad|iphone|mac/i.test(navigator.userAgent)
7、ios系统position:fixed元素遇到键盘弹出的时候就会出现错位现象,Android系统这问题支持的比较好;
8、Android webview屏蔽了<input type=“file”/>文件上传控件,但是他并没有完全封掉。Android 代码有办法解决,Android4.4.因谷歌系统的原因还是屏蔽了文件上传控件,目前没有特好办法彻底解决;
9、ios5系统的设备,无法调用相册,新浪微博、微信等也存在同样的问题,判定是苹果系统的问题,暂无解决办法。
(以上8、9两点总结就是嵌入在微信里面的页面图片上传需要调用微信的sdk接口,因为微信不支持图片上传)
10、ios系统中,在webview中点击 <input type="file" /> 的时候,弹出底部界面总是显示英文,Choose Existing File,解决办法:需要在Xcode工程配置中的info.plist里面添加一个Localizations的选项,然后在里面添加对中文的支持。
11、使用JS判断移动设备的终端类型(浏览器UserAgent)方法:
JavaScript是如何判断移动设备的类型呢?答案是:User Agent。
什么是User Agent?懂一点网页制作的人应该都明白。简单的说,User Agent就是用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。
User Agent的判断是识别浏览器的关键,不仅仅如此,移动互联网开发势头迅猛,通过User Agent判断桌面端设备或移动设备就变的很为重要。当然,通过User Agent也可以用来改善一定的兼容性,比如判断得到用户用IE6浏览器那么就是用不同的代码。
<script type="text/javascript"> var browser = { versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf("Trident") > -1, //IE内核 presto: u.indexOf("Presto") > -1, //opera内核 webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核 gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器 iPhone: u.indexOf("iPhone") > -1 , //是否为iPhone或者QQHD浏览器 iPad: u.indexOf("iPad") > -1, //是否iPad webApp: u.indexOf("Safari") == -1 //是否web应该程序,没有头部与底部 }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } document.writeln("语言版本: "+browser.language); document.writeln(" 是否为移动终端: "+browser.versions.mobile); document.writeln(" ios终端: "+browser.versions.ios); document.writeln(" android终端: "+browser.versions.android); document.writeln(" 是否为iPhone: "+browser.versions.iPhone); document.writeln(" 是否iPad: "+browser.versions.iPad); document.writeln(navigator.userAgent); </script>
另附PC浏览器类型UserAgent判断的函数:
<script language="javascript"> var explorer =navigator.userAgent,browse; if (explorer.indexOf("MSIE") >= 0){ //ie browse = "ie"; }else if (explorer.indexOf("Firefox") >= 0) { // firefox 火狐 browse = "Firefox"; }else if(explorer.indexOf("Chrome") >= 0){ //Chrome 谷歌 browse = "Chrome"; }else if(explorer.indexOf("Opera") >= 0){ //Opera 欧朋 browse = "Opera"; }else if(explorer.indexOf("Safari") >= 0){ //Safari 苹果浏览器 browse = "Safari"; }else if(explorer.indexOf("Netscape")>= 0) { //Netscape browse = "Netscape"; } </script>
12、移动端监听input活着textarea文本框val值发生变化时使用onkeyup是无效的,可以用oninput代替(IE678不兼容此属性)。
以上是印象最深的几个问题,日后接着补充。
————————————————2016-9-28补充如下———————————————
13、sessionStorage和localStroage只有在Safari浏览器【无痕模式】下面无法写入新的内容,并且会抛出异常导致js无法正常执行,最终页面无法正常加载。
解决办法:
使用try catch包裹对localStorage写入的代码:
try { window.localStorage.foobar = "foobar"; } catch(_) { alert("本地储存写入错误,若为safari浏览器请关闭隐身模式浏览。"); }
14、微信里的页面 html5的download属性无效,被微信给禁掉了,所以只能预览不能进行下载。
15、在微信等webview中无法修改document.title的情况hack (angularjs ios title 不能修改的bug解决方法)
解决办法:
var $iframe = document.createElement('iframe') $iframe.src = '/favicon.ico' $iframe.style.height = 0 $iframe.addEventListener('load', chTitle) $body.appendChild($iframe)
16、微信浏览器里面禁止了【下载】
17、判断是否是微信浏览器方法:
/** * 判断是不是微信浏览器 * @returns {boolean} */ function isWechat() { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") return true; else return false; }