移动端开发需要注意的一些事情
2016-03-19 19:08
363 查看
一、关于单位的使用
相信只要做过移动端开发的人,或者刚入门的新手朋友们,最纠结的问题是在于“字体”单位的选择!为什么会这样说呢?
可能在传统的PC端来说,1px=1px的比例。而在移动端却不是这样,1px = ?。 因为出现了一个像素密度这样个东西,就不能在移动端使用“PX”这个单位。可能在你的大屏手机是1px等于1点几个像素,可能在小屏手机却刚好。就好比网页的兼容性一样,浏览器的内核不同,解析当然会有所不同!
正好,CSS3又给你出现了一个新的单位“rem”。如果有对rem还有不怎么了解的朋友,可以看看这篇文章:webapp开发之-“rem”单位。
当然出现了这样的问题,首先我们就会去问问神奇的“百度”。不是网上流传这样一个段子么:“有事找度娘,无事上度娘!”,好吧,我又邪恶了!回归正题,大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%,再来使用rem这个单位就能很好的解决这个问题!”
这样设置后:就会得到一个兑换比例值:1rem = 10px; 如果我们要给一个"h1"标签设置字体大小为20px的时候。我们就直接设置为rem就好了!
代码如下:
二、布局上
相信布局不用我多说什么了,就按照正常的网页布局来写,一般设计师给的效果图是640*960.我们就按照320的比例来做,就是宽度减少一半。可能多数人跟我之前是一样,字体用单位“rem”。其它照样使用px这个单位。好吧!最近又被严格的UI设计师,找出问题来了,你怎么这里跟我效果图对不上呀!....
好吧!原来想偷工减料的就这样写的,没办法,既然被严格的查起来了,又得去找解决方案!(可能之前也没太在意这些细节,一直就这样拖着)
暂时找了个合适的解决方案,这样既解决了字体单位的问题,又兼容单位像素的问题!,只是换算麻烦点!
比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5rem; 前提是我们需要在头部添加以下代码:
PS:效果图实际像素为60px,在手机端就是30px,在转化成rem单位就在除以20。
可能还有更好的解决方案,暂时没找到更好的方案...
三、细节处理
可能处理细节就是在解决兼容性的问题吧!还好手机端没有蹦出个IE来,基本都是webkit内核和IOS自带的浏览器。
1、禁止自动识别电话和android自动识别邮箱
2、使用无衬线字体
iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明,华文黑体并不存在iOS的字体库中,但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁
原生Android下中文字体与英文字体都选择默认的无衬线字体
4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体
3、禁止选择文本
4、禁止长按链接与图片弹出菜单
5、去除A连接input标签,点击出现自带的阴影样式
6、屏蔽阴影:
可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。
7、单击延迟
click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。
开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
8、手机拍照和上传图片
html5模板代码
相信只要做过移动端开发的人,或者刚入门的新手朋友们,最纠结的问题是在于“字体”单位的选择!为什么会这样说呢?
可能在传统的PC端来说,1px=1px的比例。而在移动端却不是这样,1px = ?。 因为出现了一个像素密度这样个东西,就不能在移动端使用“PX”这个单位。可能在你的大屏手机是1px等于1点几个像素,可能在小屏手机却刚好。就好比网页的兼容性一样,浏览器的内核不同,解析当然会有所不同!
正好,CSS3又给你出现了一个新的单位“rem”。如果有对rem还有不怎么了解的朋友,可以看看这篇文章:webapp开发之-“rem”单位。
当然出现了这样的问题,首先我们就会去问问神奇的“百度”。不是网上流传这样一个段子么:“有事找度娘,无事上度娘!”,好吧,我又邪恶了!回归正题,大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%,再来使用rem这个单位就能很好的解决这个问题!”
这样设置后:就会得到一个兑换比例值:1rem = 10px; 如果我们要给一个"h1"标签设置字体大小为20px的时候。我们就直接设置为rem就好了!
代码如下:
二、布局上
相信布局不用我多说什么了,就按照正常的网页布局来写,一般设计师给的效果图是640*960.我们就按照320的比例来做,就是宽度减少一半。可能多数人跟我之前是一样,字体用单位“rem”。其它照样使用px这个单位。好吧!最近又被严格的UI设计师,找出问题来了,你怎么这里跟我效果图对不上呀!....
好吧!原来想偷工减料的就这样写的,没办法,既然被严格的查起来了,又得去找解决方案!(可能之前也没太在意这些细节,一直就这样拖着)
暂时找了个合适的解决方案,这样既解决了字体单位的问题,又兼容单位像素的问题!,只是换算麻烦点!
比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5rem; 前提是我们需要在头部添加以下代码:
PS:效果图实际像素为60px,在手机端就是30px,在转化成rem单位就在除以20。
三、细节处理
可能处理细节就是在解决兼容性的问题吧!还好手机端没有蹦出个IE来,基本都是webkit内核和IOS自带的浏览器。
1、禁止自动识别电话和android自动识别邮箱
4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体
3、禁止选择文本
7、单击延迟
click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。
开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
8、手机拍照和上传图片
相关文章推荐
- 第一个小程序:用户登录
- Android Studio 1.5.0版本引用library
- ios学习之UIWebView(2)
- Android ListView 几个重要属性
- Objective-C错误处理
- 编写一个iOS应用之前必须做的7件事(附相关资源)
- Android ScrollView中嵌套ListView时显示不全的简便解决方案
- Objective-C KVC&KVO
- android 水平滚动ScrollView: HorizontalScrollView
- android 视频录制 混淆打包 之native层 异常的解决
- patchoat相关代码在Android M版中的变化(1)
- Android layout Inflate 性能浅析
- 类似解锁或者支付密码输入框
- android studio端口占用问题
- Android中Scrollview与ViewPager冲突问题解决方案
- Android ListView 卡顿问题分析与解决方案
- Spring的ApplicationEvent的使用
- Android5.0常用颜色属性说明
- Android5.0常用颜色属性说明
- Android5.0常用颜色属性说明