移动端制作遇到的坑

文章目录

写一个好的web app初始化样式很重要,以下为之前的flexible.js中项目的同个样式

@charset "utf-8";

html {
    color: #000;
    background: #fff;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html * {
    outline:none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

html, body {
    font-family: sans-serif;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}

input, select, textarea {
    font-size: 100%;
}

/* 去掉各 Table  cell 的边距并让其边重合 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 去除默认边框 */
fieldset, img {
    border: 0;
}

/* 去掉 firefox 下此元素的边框 */
abbr, acronym {
    border: 0;
    font-variant: normal;
}

/* 一致的 del 样式 */
del {
    text-decoration: line-through;
}

address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: 500;
}

/* 去掉列表前的标识, li 会继承 */
ol, ul {
    list-style: none;
}

/* 对齐是排版最重要的因素, 别让什么都居中 */
caption, th {
    text-align: left;
}

/* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 500;
}

q:before, q:after {
    content: '';
}

/* 统一上标和下标 */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* 正常链接 未访问 */
a:link {
}

/* 鼠标悬停 */
a:hover {
    text-decoration: underline;
}

/* 默认不显示下划线,保持页面简洁 */
ins, a {
    text-decoration: none;
}

 

原文:web app遇到的一些坑及小技能(持续更新...)

遇到的一些坑

  1. 问题:手机端 click 事件会有大约 300ms 的延迟

    原因:手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟

解决方法:使用touch事件来代替click事件,如 zepto.js 的tap事件和fastClick,还有我自己也写了个移动端手势操作库mTouch,都有相应的事件可以代替click事件解决这个问题

  1. 问题:在部分机型下(如小米4、小米2s、中兴) body 设置的 font-size 是用 rem 单位的话,若其他元素没有设置font-size,该font-size值继承于body,则会很高概率出现字体异常变大的情况

    原因:估计是跟app的webview默认设置有关,body的font-size使用rem单位,就是相对于当前根节点的font-size来确定的,可能在某些webview的设置下,body用的是webview设置的默认字体大小,因为在我给html设置了一个px单位的默认font-size时,还是会出现字体异常变大的情况,具体webview的一些细节就没有再研究了

解决方法:body设置一个px单位的默认font-size值,不用rem,或者给字体会异常变大的元素设定一个px单位的font-size值

  1. 问题:使用zepto的 tap 事件时会出现“点透”bug,比如:一个元素A绑定了tap事件,紧跟其后的元素B绑定了click事件,A触发tap事件时将自己remove掉,B就会自动“掉”到A的位置,接下来就是不正常的情况,因为这个时候B的click事件也触发了

    原因:因为tap事件是通过 touchstarttouchmovetouchend 这三个事件来模拟实现的,在手机端事件机制中,触发touch事件后会紧接着触发touch事件坐标元素的click事件,因为B元素在300ms内刚好“掉”回来A的位置,所以就触发了B的click事件,还有zepto的tap事件都是代理到body的,所以想通过e.preventDefault()阻止默认行为也是不可行的

解决方法:(1)A元素换成click事件;(2)使用我写的库 mTouch 来给A绑定tap事件,然后在事件回调中通过e.preventDefault()来阻止默认行为,或者换用其他的支持tap事件的库

  1. 待续...

一些有用技能点

  1. 通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色
  2. 设置css属性 -webkit-user-select:none; 控制用户不可选择文字
  3. 区域性 overflow: scroll | auto 滚动时使用原生效果:-webkit-overflow-scrolling: touch (ios8+,Android4.0+)
  4. 单行、多行溢出省略
    /* 单行省略 */
    .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    
    /* 多行省略 */
    .ellipsis-2l {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* 数值代表显示几行 */
    -webkit-box-orient: vertical;
    }
  5. 垂直居中常用方法:
    <!-- html结构 -->
    <body>
    <div class="wrap">
        <div class="box"></div>
    </div>
    </body>
    
    /* css样式 */
    
    /* (1) 模仿单行文字居中的方式 */
    .wrap {
    width: 200px;
    height: 80px;
    line-height: 80px;
    }
    
    .box {
    display: inline-block;
    vertical-align:middle;
    }
    
    /* (2) 已知宽高,通过position:absolute; */
    .wrap {
    width: 200px;
    height: 200px;
    position: relative;
    }
    
    .box {
    width: 100px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -40px;
    }
    
    /* (3) 未知宽高,通过css3属性 transfrom */
    .wrap {
    width: 200px;
    height: 200px;
    position: relative;
    }
    
    .box {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }
    
    /* (4) 通过flex布局 */
    <!-- html结构 -->
    <body>
    <div class="wrap flexbox flexbox-center flexbox-middle">
        <div class="box"></div>
    </div>
    </body>
    
    /* css样式 */
    
    .flexbox {
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex;
    display: flex;
    }
    
    /* 水平居中 */
    .flexbox-center {
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center;
    justify-content: center;
    }
    
    /* 垂直居中 */
    .flexbox-middle {
    -webkit-box-align: center; 
    -moz-box-align: center;
    -ms-flex-align: center; 
    -webkit-align-items: center;
    align-items: center;
    }
  6. retina屏幕实现真正的1px边框
    <!-- html结构 -->
    <body>
    <div class="box retina-border rt-bd-all"></div>
    </body>
    
    /* css样式 */
    
    .box {
    width: 200px;
    heigth: 100px;
    box-sizing: border-box;
    border: 1px solid #aaa;
    }
    
    /* 去掉元素原有的边框 */
    .retina-border {
    position: relative;
    border: none;
    }
    
    /* 通过设置伪元素放大到2倍的宽高,设置1px边框,再缩小1倍,以达到0.5px边框的效果*/
    .retina-border:after {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border: 0px solid #aaa;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    }
    
    .rt-bd-all:after {
    border-width: 1px;
    }
    
    /* 如果只是想设置一条边框,可以这样改一下,以此类推 */
    
    <!-- html结构 -->
    <body>
    <div class="box retina-border rt-bd-b"></div>
    </body>
    
    /* css样式 */
    
    .tr-bd-b:after {
    border-bottom-width: 1px;
    }
    
    .tr-bd-t:after {
    border-top-width: 1px;
    }
    
    .tr-bd-l:after {
    border-left-width: 1px;
    }
    
    .tr-bd-r:after {
      border-right-width: 1px;
    }
    
  7. 关于水平、垂直、多列布局的多种实现参照:《利用HTML和CSS实现常见的布局
原创文章:移动端制作遇到的坑 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/mobile-web-app-fix.html)
评论已关闭。