移动端页面小结

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

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系统的设备，无法调用相册，新浪微博、微信等也存在同样的问题，判定是苹果系统的问题，暂无解决办法。

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不兼容此属性）。

以上是印象最深的几个问题，日后接着补充。