开发者分享:移动端开发踩坑记

移动开发
一起来分享下,我做移动端开发半年来的一些经验,以及需要注意的一些东西吧!

[[148085]]

不知不觉,做移动端开发也有半年的时间了。从刚开始接触移动端开发,到现在的细节完善。期间也走了很多坑!为什么会走这么多坑呢?

可能身边做前端开发的朋友比较少,想找个人一起研究技术的都没。也加过一些前端群,大多数些扯淡聊天的群。没办法,只得自己去苦逼的研究!

下面一起来分享下,我做移动端开发半年来的一些经验,以及需要注意的一些东西吧!

一、关于单位的使用

相信只要做过移动端开发的人,或者刚入门的新手朋友们,最纠结的问题是在于“字体”单位的选择!为什么会这样说呢?

可能在传统的PC端来说,1px=1px的比例。而在移动端却不是这样,1px = ?。 因为出现了一个像素密度这样个东西,就不能在移动端使用“PX”这个单位。可能在你的大屏手机是1px等于1点几个像素,可能在小屏手机却刚好。就好比网页的兼容性一样,浏览器的内核不同,解析当然会有所不同!

正好,CSS3又给你出现了一个新的单位“rem”。如果有对rem还有不怎么了解的朋友,可以看看这篇文章:《Web app变革之rem》。

当然出现了这样的问题,首先我们就会去问问神奇的“百度”。不是网上流传这样一个段子么:“有事找度娘,无事上度娘!”,好吧,我又邪恶了!回归正题,大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%,再来使用rem这个单位就能很好的解决这个问题!”

这样设置后:就会得到一个兑换比例值:1rem = 10px; 如果我们要给一个"h1"标签设置字体大小为20px的时候。我们就直接设置为rem就好了!

代码如下:

  1. html{font-size:62.5%;} 
  2. h1{fon-size:2rem} ==>h1{fon-size:20px} 

 

二、布局上

相信布局不用我多说什么了,就按照正常的网页布局来写,一般设计师给的效果图是640*960.我们就按照320的比例来做,就是宽度减少一半。可能多数人跟我之前是一样,字体用单位“rem”。其它照样使用px这个单位。好吧!最近又被严格的UI设计师,找出问题来了,你怎么这里跟我效果图对不上呀!....

好吧!原来想偷工减料的就这样写的,没办法,既然被严格的查起来了,又得去找解决方案!(可能之前也没太在意这些细节,一直就这样拖着)

暂时找了个合适的解决方案,这样既解决了字体单位的问题,又兼容单位像素的问题,只是换算麻烦点!

比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5rem; 前提是我们需要在头部添加以下代码:

PS:效果图实际像素为60px,在手机端就是30px,在转化成rem单位就在除以20。

 

 

 

  1. html { 
  2.     font-size : 20px; 
  3. @media only screen and (min-width: 401px){ 
  4.     html { 
  5.         font-size: 25px !important; 
  6.     } 
  7. @media only screen and (min-width: 428px){ 
  8.     html { 
  9.         font-size: 26.75px !important; 
  10.     } 
  11. @media only screen and (min-width: 481px){ 
  12.     html { 
  13.         font-size: 30px !important; 
  14.     } 
  15. @media only screen and (min-width: 569px){ 
  16.     html { 
  17.         font-size: 35px !important; 
  18.     } 
  19. @media only screen and (min-width: 641px){ 
  20.     html { 
  21.         font-size: 40px !important; 
  22.     } 

可能还有更好的解决方案,暂时没找到更好的方案...

三、细节处理

可能处理细节就是在解决兼容性的问题吧!还好手机端没有蹦出个IE来,基本都是webkit内核和IOS自带的浏览器。

1、禁止自动识别电话和android自动识别邮箱

 

 

  1. <br> 

 

2、使用无衬线字体

 

  1. body { 
  2.        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 
  3.     } 

 

 

 

 

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明,华文黑体并不存在iOS的字体库中,但系统会自动将华文黑体 STHeiTi 兼容***系统默认中文字体黑体-简或黑体-繁

 

  1. Heiti SC Light 黑体-简 细体 (iOS 7后废弃) 
  2. Heiti SC Medium 黑体-简 中黑 
  3. Heiti TC Light 黑体-繁 细体 
  4. Heiti TC Medium 黑体-繁 中黑 

 

原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会*** Droid Sans Fallback

4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体

其他第三方 Android 系统也一致选择默认的无衬线字体

3、禁止选择文本

 

  1. html, body { 
  2.       -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */ 
  3.      user-select: none; 

 

4、禁止长按链接与图片弹出菜单

 

 

 

  1. a, img { 
  2.        -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ 
  3.     } 

5、去除A连接input标签,点击出现自带的阴影样式

  1. a,input{ 
  2.     -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除自带阴影的样式*/ 
  3.     } 

 

6、屏蔽阴影:

 

 

  1. -webkit-appearance:none; 

 

可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。

7、单击延迟

click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。

开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。

8、手机拍照和上传图片

QQ截图20150907100214.png

HTML5模板代码:点击下载

再次觉得一个人苦逼的研究太累了,没有方向,可能会浪费大量的时间在做研究和测试上,但是也有一些乐趣在里面!对于学习和成长不失为一个很好的办法。

责任编辑:倪明 来源: 段亮的博客
相关推荐

2013-10-30 12:51:34

2011-04-25 16:56:34

Greedy Bank游戏开发独立开发者

2011-12-29 17:09:08

开发者沙龙

2012-12-31 13:17:10

移动开发者营销

2010-08-04 16:26:32

Android开发

2020-09-15 08:46:26

Kubernetes探针服务端

2015-07-02 10:22:53

移动开发设计趋势

2013-09-10 09:35:53

移动开发者全能开发者技能

2013-03-21 09:54:51

微信开发者案例

2013-07-19 16:20:27

触控手游

2012-10-28 10:56:18

2013-07-22 11:28:35

触控开发者沙龙cocos2d-x

2011-04-06 15:22:00

虚拟引擎移动游戏开发

2013-01-17 13:06:47

移动开发者营销推广

2017-08-01 16:07:50

移动端手机端搜索引擎

2017-05-05 08:12:51

Spark共享变量

2021-10-28 19:10:02

Go语言编码

2015-06-15 10:57:34

开发者2015移动开发

2015-01-04 09:42:28

MDSA移动开发者服务联盟

2021-07-05 07:55:11

PC端移动端设计
点赞
收藏

51CTO技术栈公众号