zoukankan      html  css  js  c++  java

  • 移动端制作的常见问题及解决方法

    常见的问题

    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事件是通过 touchstart 、touchmove 、 touchend 这三个事件来模拟实现的，在手机端事件机制中，触发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 {
 200px;
height: 80px;
line-height: 80px;
}

.box {
display: inline-block;
vertical-align:middle;
}

/* (2) 已知宽高，通过position:absolute; */
.wrap {
 200px;
height: 200px;
position: relative;
}

.box {
 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -40px;
}

/* (3) 未知宽高，通过css3属性 transfrom */
.wrap {
 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 {
 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;
 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- 1px;
}

/* 如果只是想设置一条边框，可以这样改一下，以此类推 */

<!-- html结构 -->
<body>
<div class="box retina-border rt-bd-b"></div>
</body>

/* css样式 */

.tr-bd-b:after {
border-bottom- 1px;
}

.tr-bd-t:after {
border-top- 1px;
}

.tr-bd-l:after {
border-left- 1px;
}

.tr-bd-r:after {
  border-right- 1px;
}

    好的初始化样式很重要：

    @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;
}
  • 相关阅读:
    今天面试一些程序员(新，老)手的体会
    UVA 10635 Prince and Princess
    poj 2240 Arbitrage
    poj 2253 Frogger
    poj 2485 Highways
    UVA 11258 String Partition
    UVA 11151 Longest Palindrome
    poj 1125 Stockbroker Grapevine
    poj 1789 Truck History
    poj 3259 Wormholes
  • 原文地址：https://www.cnblogs.com/axl234/p/5078127.html
Copyright © 2011-2022 走看看