@色少10年前
首先此篇文章是关于iPhone和andriod等智能手机网站webapp的开发的一些小小的心得,中等屏幕的智能手机（物理尺寸为7寸以内）。比如iPhone3GS、iPhone4、iPhone4s等。首先，我们先来定义一下手机的屏幕大小的归类档次：
A．小屏幕：宽度240 px 以下屏幕或者2.4 以下屏幕
一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。
B. 中等屏幕：宽度240~320 px，或者2.4~3.0吋屏幕
智能手机以Symbian或S60 v1,2,3，Windows mobile为主流；或者是非智能手机的客户端以java版本为主。
同时包括240*320的宽屏手机。
C. 大屏幕：宽度320 px以上屏幕或者 3.0吋以上的屏幕
iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致；
Android 系统手机及衍生平台手机
Win phone 7 系统手机
Nokia S60 v5，symbian 3等
如果是为了满足功能的话对于小屏幕的手机可以选择结合xhtml、wml开发wap2.0.
以下是关于页面制作的一些小技巧：
首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
第二个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
第三个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 <meta content=”telephone=no” name=”format-detection” />
如何去除Android平台中对邮箱地址的识别,看过iOS webapp API的人都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中<meta content=”email=no” name=”format-detection” />
第四个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； <meta content=”yes” name=”apple-mobile-web-app-capable” />
其次是关于页面css运用的小技巧：
1、 放弃CSS float属性。在项目开发过程中可以会遇到内容排列排列显示的布局（如图），假如你遇见这样的视觉稿，我会建议你放弃float，可以直接使用display:block; 在andriod2.3中对于浮动的支持度简直无比蛋疼，也可以选择css3中一个新的属性box-flex。在css中为display: box; 结合box-orient:horizontal;这个属性一起用就可以达到内容排列排列显示的布局。具体这两个属性可以参考：
（内容排列排列显示的布局）
2、利用CSS3制作有内外发光和圆角还有高光加渐变的按钮，这样的按钮虽然勉强可以利用css3来制作，但是在andriod2.3中渐变圆角等属性是不兼容的。因此，这个时候你不妨使用border-image来定义这个按钮的样式。具体这个属性可以参考http://www.w3cplus.com/content/css3-border-image
3、如何解决Android 2.0平台中圆角的问题
在对一个元素定义圆角时，为完全兼容android 2.0的平台，我们必须要按照以下技巧来定义边框圆角：
- -webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；
- 如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
- 假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0的平台中将全部显示直角。
4、块级化a标签 请保证将每条数据都放在一个a标签中，为何这样做呢？因为在触屏手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
5、如何关闭iOS中键盘自动大写。我们知道在IOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
6、IOS禁止用户在新窗口打开页面。有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。
7、iOS中如何禁止用户保存图片、复制图片
img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存、复制你的图片了。
8、iOS中如何禁止用户选中文字。我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。
9、textarea在手机浏览器中的问题：不能够尽贴外面的容器边框。无论是有没有padding还是margin默认有对于外容器有一定距离，可以利用lineheight：0；解决
10、自适应布局模式。在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师按照页面的复杂程度选择使用自适应布局模式或按百分比的流体布局。
| 自适应布局 | 百分比流体布局 | |
| 优点： | 无dpi缩放，根据不同分辨率，在不同终端均用最合适的方式显示 | 开发成本低，一次开发，到处运行在大分辨率下表现良好对于未来自适应性良好
|
| 缺点： | 1、沟通成本高，从交互设计、UI设计到前端工程师均需参与2、开发成本高，做大量嗅探，写多个分支。3、未来的新的主流分辨率出现，需再增加分支 | 1、有dpi缩放，显示效果非最优2、大分辨率下，交互设计受制约3、小分辨率下，图片大小没有得到最大优化
|
（百分比流体布局如图）
在这里介绍多个测试多个分辨率的小工具：
http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/
如图：
还有一个就是最新版本的火狐也具备响应式设计视图：
11、如何禁止用户旋转设备。我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但是我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，而且在Android平台，确实也是阻止不了的。提供IOS中禁止用户旋转设备的参考事件：
event : window.onorientationchange
vaule: window.orientation
12、某些样式的小细节：
-webkit-text-size-adjust:none;苹果移动设备上会识别，用于保证文字大小。禁止其在IOS上的文字缩放。
-webkit-tap-highlight-color: ; //手指触发链接时颜色
CSS变换（Transitions）
-webkit-transition-property 定义需要渐变的属性 -webkit-transition-duration 定义动画时间 -webkit-transition-delay 定义延迟时间 -webkit-transition-timing-function 定义贝赛尔曲线函数
-webkit-transition-property可以定义具体的属性，例如width，height，多个属性用逗号隔开， 也可以定义all，这样所有具有连续数值类型的样式属性变化都会触发transtions，现在我们可以尝试 创建一个transitions，
div.zoom-fade{-webkit-transition-property:-webkit-transform,opacity; -webkit-transition-duration: 4s, 2s; -webkit-transition-delay: 2s, 0; }
我们也可以把这些属性写在一行，
div.sliding { -webkit-transition: opacity 500ms ease-out 100ms; }
-webkit-appearance:none: //取消默认样式
text-shadow: #666 0 -1px 0; 文字阴影
-webkit-border-radius:10px; 圆角
background:url(),url(),url()_//多重背景
color:rgba (255.255,255,.7)//定义透明颜色
border-width:0 14px 0 14px;
-webkit-border-image:url(img.png) 0 14 0 14 //创建按钮
下面是关于页面功能介绍（主要是利用某些属性）：
1、如何检测用户是通过主屏启动你的webapp 。看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone\ipod\ipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。 在Android中从来没有添加到主屏这个东西的。
2、隐藏地址栏
普通的是利用 setTimeout(scrollTo,0,0,0);就可以实现静态页面在IOS和android的设备，请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。然而一个网站不可能就是静态页面，很多时候需要利用到置顶的组件如：
这样就会和本身普通隐藏顶部导航栏有些许区别而且ios上和android也是有不一样的兼容问题，因此可以利用addEventListener(‘load’.funcion(){
setTimeout(function(){window.scrollTo(0,1);},100};
})
3、iOS中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？
通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
4、如何解决盒子边框溢出
当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。