找回密码
当前位置：前端开发者 > 教程 > 正文

移动端开发知识积累

2018-09-18 22:39:54 分类：教程 阅读(155) 评论(0)

网站开发设计是前端吗 前端开发常用网站 前端后端都是网站开发吧

###实用代码

1.css3使用 需要兼容
css 代码

//移动端
-webkit-transform: translate(100%);
transform: translate(100%);
//PC端
-webkit-transform : rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);

2.背景图加背景色
css 代码

background:#000 url(‘a.png’) no-repeat 0 0;

3.控制Input输入长度
html 代码

<input type=”text” placeholder=”” maxlength=”11″>

4.块元素居中定位
css 代码

.center {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

5. 几个好用的zepto方法
javascript 代码

//实用方法
.data(‘index’) //获取data-index值
.hasClass() //判断class存在
.off(‘click’) //解除事件绑定
..toLowerCase() //忽略大小写
// 几个选择器
.parent() //上一级
.parents() //所有上级
.children() //子级
.find() //子级内查找
.next() //下一个
.prev() //上一个

6. 移动端布局最小高度是100%
javascript 代码

html,body{
    width:100%;
    height:100%;
}
#wrap{
    width:100%;
    min-height:100%;
}
window.onload = function(){
    var sHeight = document.body.clientHeight;
var screenH = $(window).height();
if ( sHeight < screenH ) {
     $(“#wrap”).css( “height” , screenH + “px” );
}
}

7. 时间格式处理
javascript 代码

//new Date() 时间戳
//Date.parse()可解析时间为 毫秒
Date.parse( new Date()) / 1000

8.正则简单验证手机号
javascript 代码

var reg = /^1\d{10}$/
if (!reg.test(phone)) {
    alert(‘请输入正确的手机号码！’)
    return false
}

9. 实用清除浮动
css 代码

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: ”;
    display: table;
}

10. 移动端布局放置视口太大

css 代码

    max-width: 700px;
    margin: 0 auto;
}

11. 类似于‘击败了90%’的算法
javascript 代码

//按比例赋值
function rank(t) {
    if (t >= 0 && t <= 100) {
        return 99
    } else if (t > 100 && t <= 300) {
        return Math.round(((t – 100) / 200) * 2) + 96
    } else if (t > 300 && t <= 500) {
        return Math.round(((t – 300) / 200) * 5) + 91
    }
}

12. 移动端布局，块内变化时注意使用scrollTop
javascript 代码

//回到顶部
$(‘body’).scrollTop(0);

13. 移动端布局，善于使用Loading
javascript 代码

//页面内容切换，发送ajax ，页面加载，
loading()
$(‘div’).hide()
setTimeout(function() {
    loaded()
    $(‘div’).show()
}, 800)

14. 移动端布局，神奇的:afer, :before,
css 代码

.box span {
    display: inline-block;
    width: 30px;
    position: absolute;
    top: -12px;
}
.box span:nth-child(1) {
    left: -2px;
    background: #ffcb00;
}
.box span:after {
    color: #ffa837;
}
.box span:nth-child(1):after {
    content: ‘分享’;
}

###常见IOS，Android ，微信兼容性问题

1.微信 不支持 location.reload()事件
解决办法 ：在分享链接后 跟不同参数即可
javascript 代码

location.href= location.protocol + “//” + location.host + location.pathname +’?1′;

  1. 移动端用框架zepto
    ‘click’事件在移动端会有200ms的延时，可用zepto中的方法tap代替click
    ‘click’事件容易发生点透：
    解决办法1：使用tap事件替代
    解决办法2：阻止浏览器默认事件
    javascript 代码
$(‘input’).on(‘click’, function(e) {
    var e = e || window.event
    e.stopPropagation()
    e.preventDefault()
    return false
})
  1. zepto中，给动态添加元素绑定事件
    使用 on,在最外层
    javascript 代码

$(document).on(‘click’,’div’,function(){ });

4.模拟微信聊天滚动效果遇到问题，IOS中弹出虚拟键盘会影响fixed定位问题
（1）弹出虚拟键盘会把fixed定位的元素顶上去
（2）当弹出虚拟键盘时fixed定位失效，如果在持续滚动的情境下，继续动态append元素 会使fixed定位元素往上去。
解决办法：
IOS延迟加载事件，阻止安卓键盘回落
javascript 代码

if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {
    $(‘.ipt’).on(TAP, function(e) {
        //点击输入框，阻止默认事件，然后再获取焦点
        e.preventDefault()
        $(window).scrollTop(document.body.clientHeight)
        setTimeout(function() {
            $(‘.ipt’).focus()
        }, 200)
    })
} else {
    window.onresize = function() {
        $(window).scrollTop(document.body.clientHeight)
    }
    //阻止Andriod虚拟键盘收回，给input框焦点
    $(‘.ipt’).blur(function() {
        setTimeout(function() {
            $(‘.ipt’).focus()
        }, 100)
    })
}
//点击发送按钮时，IOS虚拟键盘回落 其它事件机制停止
//解决办法，延迟加载等到键盘落下
$(‘#btn’).on(‘click’, function() {
    if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {
        setTimeout(function() {
            $(‘.message:last’).show(500)
            $(window).scrollTop(document.body.clientHeight)
        }, 600)
    }
})

5.需要终止的函数循环，注意添加 return false; 或者 break;
要善于使用 return；可减少bug出现。

web前端开发学习网站 前端开发网站开发 网站前端开发工资

» 本文来自：前端开发者 » 《移动端开发知识积累》
» 本文链接地址：https://www.rokub.com/5795.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论