移动端开发知识点总结

  在去年的这个时候,开始慢慢接触到移动端,接触移动端并不早。但那时查找相关资料不是很多(没技术,找不到),只有在慢慢的摸索敲打代码中寻找方法!记得那时一直纠结为什么别人的图片在手机上那么清晰,而我们做的就那么的模糊,后来听过放大图片,之后用代码缩小,才保证在手机上清晰。(后面才了解到是DPI, retina 2x 的问题)。

  废话少说,进入正题!

以下为移动端需要的知识点整理:

  1)移动端屏幕多种多样,DPI(像素密度)不同,越高图像越清晰。而普通android手机和iphone手机的分辨率的基本比例1:2。 故此知道了为什么在苹果上的图标变模糊了, 因为默认被放大了两倍大小来呈现页面!

  目前我们的手机设计图为iphone5s的分辨率640*1136, 而在切图的时候,使用320的宽度制作。为何这样呢?

  原因还是因为retina屏的高分辨率,把缩小一倍大小,保证图片的高清1:2比例。如果在条件允许,建议制作多套图标,之后通过媒介引入。

详细步骤介绍,参考大漠的: 走向视网膜(Retina)的Web时代

  

  2)viewport:可视区域,此方法有多个设置设置参数:

width = [pixel_value | device-width]       // 宽度(可选实际宽度值或者 第二个参数)
height = [ pixel_value |device-height]     // 高度
initial-scale = float_value            // 初始比例
minimum-scale =  float_value        // 最小比例
maximum-scale =  float_value        // 最大比例
user-scalable = [yes | no]            //是否缩放

此参数分别设置可视区域,比例大小,通常都使用如下代码:

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>

宽度采用设备的宽度,默认及最大最小比例都为1,不允许缩放! 正常我们还会为iphone手机设置如下参数:

// 隐藏地址栏 状态栏 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 // 离线应用(看需求而定)
<meta name="apple-mobile-web-app-capable" content="yes" /> 
// 禁止识别电话号码
<meta name="format-detection" content="telephone=no"  />

 

  3)字体大小,在手机端中最好采用大小EM作为制作单位,而不是PX。目前手机的分辨率繁多,有的手机字体默认是24px为最小单位,有的则是16px。所有为了统一字体,通常会在样式中设置如下代码:

html, body {
    font-size:100%
}

  保证字体大小安装默认的大小设置,而后,所有字体采用EM计算大小,这样可以保证在跨设备的时候,字体的不会有大小不一的请求。而字体PX到EM的换算方式,可以参考大漠的:CSS中强大的EM

  

  4)流体布局(fluid layout),目前已知移动端设备屏幕过多,所以排版不能使用1024px之类的固定布局,那何为流体布局呢?流体布局的测量单位和固定布局的测量单位不同,流体布局采用的是百分比,也就是说随着设备屏幕的变化,布局的百分比也跟着相应的变化,提高了页面的流动性。流体布局及各种布局介绍,参考大漠的:响应式设计:流体布局

 

  同时,流体布局与媒介查询关系密切,媒介属性允许不同设备(如屏幕、打印机)指定不同的样式表,以及根据设备的屏幕宽高等指定对应的样式。流体布局和媒介查询相结合才能构建更好的移动端页面。什么?媒介查询不知道,那么请看大漠的文章介绍:CSS3 Media Queries

 

  

  移动端的知识点,其实说多不多,只是需要从以往的制作方式转换过来!很多移动端相关的文字,在大漠的网站上都有相应的介绍,本文主要是整理所需的知识点,一下再介绍下移动端的部分注意问题:

 

  1)字体选择:iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

  2)设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
    user-select: none;
}

  各种性能优化方面,参考:移动开发规范概述

  3) 百分比大小,遇到padding / border导致页面宽度不是预期的效果,可以使用以下css样式,改变盒子模型:

.box {
    box-sizing:border-box; /* 可以不用在计算 padding 以及 border */
}

  4)点击<a>链接或者绑定click事件,会在移动端部分android机中出现一个虚拟边框,使用以下CSS样式,清除边框:

a {
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

  5)iphone 手机 input 输入框出现奇怪的圆润风格,iphone的默认风格,解决方法:

input {
    -webkit-appearance: none;
}

  当时出现这个原因,找了好长时间才在一个外国很出名网站stackexchange 找到答案。原文:Turn off iPhone/Safari input element rounding

  6)脚本问题,在移动端使用click事件,会有300ms的延迟,所以最好使用触摸事件 touch. 请看:300毫秒点击延迟的来龙去脉。 而移动端,最好不要使用jquery / jquery mobile 框架,原因是因为太大对页面性能不好,建议 zepto.js,语法jquery类似,快速上手。

  7)涉及动画,可以考虑是否使用 translate3D 来触发 GPU 加速,原因是某些动画在移动端中执行速度会出现卡顿现象,提高流畅度

.box {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}

  如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack:

.box {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
 
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -ms-perspective: 1000;
     perspective: 1000;   
}

  具体参考司徒正美文章:用CSS开启硬件加速来提高网站性能(转), 未完,后续更新。。

   

  总结:本文为移动端相关资料整理,知识有限,欢迎各位批评指点!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。