移动端开发注意之一二

Review自己的原型时发现几个问题，分享之

1、移动端最小触控区域44*44px，再小就容易点击不到或者误点，可参考《iOS Human Interface Guidelines》: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LayoutandAppearance.html

那么怎么保证最小的触控区域呢，看看百度无线UE史玉洁11年D2分享过的一张图（手指容易落在目标偏右和偏下的位置）

从而我们可以给文字、图标、按钮等可操作元素扩展触控区域，padding、line-height等都是不错的方式。

想要成为一个优秀的前端，必须充分了解设计师的意图，在真的有问题时其实我们可以找设计师喝杯咖啡啥的，一般设计师都是美女哦，当然我们只是为了更好的用户体验

不过如果设计师给的区域就不够大，我们针对很小的icon可以如此扩展

<!--span上是背景图，通过给span增加padding或者直接在div上设定扩展后的宽高。。。然后将事件绑定在div上-->
<div class="icon"><span>图标</span></div><!--利用::before或::after伪元素设置背景图，增加伪元素padding或者直接在div上设定扩展后的宽高。。。然后将事件绑定在div上-->
<div class="icon">::before</div>

推荐利用伪元素，省了一层嵌套，移动端也不担心支持的问题，还有一种方法在特定的情况下(父元素宽度限死)使用比较好transform:scale，参照http://m.ctrip.com/webapp/tour/vacations?from=ctrip_home

红线框出的话筒，现版本已被隐藏掉，需要自己调出来，它就利用了transform:scale，之前的文章我也有讲过transform:scale和zoom的区别http://www.cnblogs.com/web-lexi/p/3968050.html

2、上面说到事件绑定到div上，由此我也想到一个问题，

很多小伙伴喜欢把事件绑定在如上图子元素上，如果熟读过高程的会知道事件委托，利用事件冒泡来绑定事件的性能远优于分别绑定于子元素，这个我就不赘述了，毕竟移动端对性能的要求还是很高的，网络和硬件没有PC那么好呀

在此给大家推荐一篇移动端前端性能优化文章http://isux.tencent.com/h5-performance.html

3、最后给个针对三星盖世3 fixed的bug小tip

在我们给元素position:fixed 设置width:100%时，变成横屏时盖3的宽度还是竖屏的宽度，如何解决

①利用媒体查询在横屏时重新赋一下样式

@media all and (orientation:landscape) {div{width: 100%;}
}

②在fixed元素里面再套一层设定position:absolute,width依然100%就可以解决

文章有参考我们原公司的点头猪（css女神哦）内部分享的邮件，在此总结出来跟大家分享，有问题欢迎指出和讨论

转载于:https://www.cnblogs.com/web-lexi/p/4250880.html

移动端开发注意之一二相关推荐

Erlang服务端开发（无需Erlang基础）笔试题
某游戏公司Erlang服务端开发(无需Erlang基础)笔试题,面向C/C++程序员一.用你熟悉的语言解决下面的问题. 1.反转输出字符串,并移除其中的空格. 2.快速的判断一个数是否素数的方法. ...
一场B站服务端开发面试之旅
作者 | 蓝来源 | 我是程序员小贱(ID:Lanj1995Q) 此次B站服务端开发面试之旅可谓惊险,不过通过对大部分面试题套路的掌握,不出意外还是拿下了,下面我们来看看这些题是不是常见的不能再常见 ...
飞桨端到端开发套件揭秘：低成本开发的四大秘密武器
11 月 5 日,在 Wave Summit+2019 深度学习开发者峰会上,飞桨全新发布和重要升级了最新的 21 项进展,在深度学习开发者社区引起了巨大的反响. 很多未到场的开发者觉得遗憾,希望可以 ...
JMessage Android 端开发详解
JMessage Android 端开发详解目前越来越多的应用会需要集成即时通讯功能,这里就为大家详细讲一下如何通过集成 JMessage 来为你的 App 增加即时通讯功能. 首先,一个最基础的 ...
java服务端开发 php_PHP使用thrift做服务端开发
php中文网最新课程每日17点准时技术干货分享 php使用thrift做服务端开发 thrift采用接口描述语言定义和创建服务,用二进制格式传输数据,体积更小.效率更高,对于高并发.数据量大和多语言 ...
taro 引入js_Taro跨端开发之多业务模块管理 React Native篇(终篇)
React Native 热更新方案 rn的业务越来越庞大,同时协同的团队越来越多. rn的动态化就必须提上日程了. 对于rn热更新,首当其冲的问题就是分包. rn的基础库很大,再加上我们依赖了很多的 ...
移动端开发, 常用CSS单位
(转)https://www.cnblogs.com/mylove103104/archive/2015/06/18/4584779.html rem "em" 单位是我们开发中比 ...
第13章 Kotlin 集成 SpringBoot 服务端开发（1）
第13章 Kotlin 集成 SpringBoot 服务端开发本章介绍Kotlin服务端开发的相关内容.首先,我们简单介绍一下Spring Boot服务端开发框架,快速给出一个 Restful He ...
移动端开发 rem 单位使用问题
前言 PC 端页面开发与移动端页面开发: PC 端页面开发需要考虑更多的兼容性问题,ie.谷歌.火狐等浏览器各自内核不同(ie 的天下). 移动端页面开发基本不用考虑这种浏览器间的兼容问题,手机上的浏 ...

移动端开发注意之一二

移动端开发注意之一二相关推荐

最新文章

热门文章