网站首页 » 前端开发 » 移动WEB » 移动端 H5 开发技巧整理
上一篇:
下一篇:

移动端 H5 开发技巧整理

前言

这篇文章主要是把平时在 H5 开发中遇到的一问题的解决方案整理记录下来,毕竟好记性不如烂笔头。

关于系统字体大小

在测试身上什么事都会发生,比如把手机系统的字体大小设置为超大,此时在不同手机这个设置影响的范围是不一样的,有些手机只会影响到系统本身的字体大小,而不会影响到 H5 中的字体大小。但不幸的是,在一些手机中这个就不是这么一回事了,它会毫不留情地把你 APP 里的字体大小一同改变,这种情况在华为手机中比较常见。比如:华为 R9(型号:EVA-AL00)、华为大屏机 M2 (型号:GEM-703L)。当你把手机的字体设置为超大时,你就会发现你的 H5 页面里的字体就会变得牛那么大。并且还会带来一个问题,字体不居中(垂直方向)了。首先我们不管字体的居中问题,先来解决字体大小的问题。

解决之道:不要用 px 来设置字体大小,改用百分比。

字体居中问题

这里所说的居中是说垂直方向,而不是水平方向,在实践中没有遇到过水平居中会因为机型的不同,系统字体大小设置的不同,而导致字体不能水平居中。这个问题,就是上面第一个问题的中引发的另一个 BUG。就是发生在华为机的身上,但在这里也不排除其它机型也会有这种情况出现。以前,我们要想让文字垂直方向居中一般都是通过行高 line-height 或者 padding 来实现。但现在情况有些不同,在某些情况下,比如:上面提到的两台华为机,把系统字体设置成超大后,文字就不再垂直居中了。要想解决这个问题,并且适配所有的手机,

解决之道:目前以个人经验最好的解决办法是用弹性布局(flex)来实现文字的居中(包括水平和垂直方向)。

就像下面这样
a{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -moz-box-pack: center;
    -webkit--moz-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

H5 布局方案

目前 app 中比较流行的布局是上中下结构,如果不是通过这种布局页面结构(比如:上下工具栏通过 fixed 来固定)的话,很有可能会带来一些不必要的麻烦,比如在 ios 中弹出键盘时,就会导致一些比较尴尬的问题,顶部错位。底部一具条如果有输入框,那么可能这个输入框就不会如你所想的那样固定在键盘的上方,而日被弹出的键盘挡住,或者会离键盘十万八千里之远(有点夸张了)。但不管怎么样,这些都是在实践中遇到的问题,但话又说回来,这些问题也不是不能解决,但解决起来也比较麻烦,并且也很有可能会因为某些页面的特殊性,而又触发了这个 BUG 。所以强烈建议用标准的上中下结构,然后配合局部滚动来实现页面的布局。

解决之道:这里有一些文章你可以前往阅读:《移动端布局解决方案》、《移动端 input 输入框弹出键盘时页面被吊打的解决方案

标题文字省略 … 显示问题

标题 … 这个可以说很常见,但有时候你会遇到无效的情况,或者需要设置一行后点点,或者两行后点点。还是看回刚才那个问题点点无效的问题,这个问题很有可能在你在使用了弹性布局中使用点点,这时就有可能会没效。除了这种之处,在设置省略… 后,可能你还需要修改下行高的大小。

解决之道:你可以看看这篇文章,估计可以解决你的燃眉之急《text-overflow:ellipsis 文字超出省略号代替不起作用解决方法》,在这篇文章中已经把通用的样式整理出来了,你可以直接拿来用。

样式属性前缀

由于各大浏览器厂商都会有自己的一套实现,也不想完全屈服于标准,于是乎就出现了各种兼容性问题,样式兼容就是其实一种,常见的解决方法就是给属性添加不同的浏览器前缀来实现兼容。在移动端看起来不必太在意的问题,但有时候就是因为你偷了个懒没加前缀或者你觉得加不加是都是差不多的。但我想告诉你的是为了不给自己挖坑,这个必需加,我就遇到过这种情况,在做一个 H5  活动时,用来一些动画效果,但相关的属性没加上浏览器前缀(-webkit-),导致了在某些手机(比如:锤子手机的坚果1)中就不能正常起作用。所以为了节省自己宝贵的时间,

解决之道:我们还是很有必要在写代码的时候就顺便把这个 -webkit- 前缀加上。

angularjs 的 ng-model 获取不到 ios 输入框值的问题

在 IOS 中有一种场景会让你很无语,比如:一个页面有两个输入框,一个是 input 另一个是 textarea 。当你点击了input 输入框后输入中文时,中文还没点选,但输入框中就已经有你输入的按钮字母了,此时你不点选中文,而是直接点选 textarea。然后直接点保存后,你会发现 ng-model 没有获取到你输入的那一串字母。这个问题只有在 IOS 中会出现。

解决之道:通过 ng-keyup 调用一个方法来把原生input 的 value 值赋值给 $scope.title。原来 input 的 value 属性是可以拿到值的。

HTML 代码
<input ng-model="title" ng-keyup="iosInput($event)" placeholder="请输入标题">
<textarea ng-model="content" ng-keyup="iosInput($event)" placeholder="请输入内容" rows="10"></textarea>
JavaScript 代码
$scope.iosInput = function ($event) {
    if (isIOS) {
        iosInputDealing($event);
        $scope.iosInput = iosInputDealing;
    }
}

function iosInputDealing($event) {
    if($event.target.tagName.toLowerCase() === 'input'){
        $scope.inputDate.title = $event.target.value;
    }else if($event.target.tagName.toLowerCase() === 'textarea'){
        $scope.inputDate.content = $event.target.value;
    }
}

本文会持续更新……,欢迎收藏到浏览器备用。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mobile-h5-develop-tips-collection/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END