移动端页面小结

前不久，做了移动端的需求，移动端真是有好多坑，下面我记录下我遇到的问题：

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;
}