浏览器检测
我们可以通过客户端检测也可以通过服务器端检测，无论哪种检测我们都离不来user agent， 在客户端我们可以使用JavaScript访问navigator.userAgent
这个属性将返回用户代理头的字符串，iphone将返回，
UA:Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0_1 like Mac OS X; zh-cn) AppleWebKit/528.18 (KHTML, like Gecko)
Version/4.0 Mobile/7A400 Safari/528.16 ACCEPT:application/xml,
application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,**;q=0.5
这样我们拿到字符串后可以通过正则表达式进行判断，对于浏览器的客户端判断Tangram Mobile已经实现。
网站建设时在服务器端我们如何获取user agent呢，我们可以从http头里面获取，http头一般包括如下属性，
User-Agent Accept Accept-Charset Accept-Language Accept-Charset
这样我们在服务器端直接从http头中可以取到user agent，然后判断方式可以借鉴客户端。服务器端方式可以用来做适配，根据不同浏览器返回不同的页面。
检测网络连接方式
如果我们可以知道用户的入网方式，就可以为用户提供不同的体验，在Android2.2以上版本，我们可以通过
navigator.connection来判断入网方式，有WIFI、CELL_2G、CELL_3G等。Iphone平台上目前并没有相应的接口。
设置meta
默认情况下，mobile会像PC上的浏览器一样渲染页面（默认的页面宽度是980px，这个值是可以通过viewport的width属性设置的），然后同比缩放以适应mobile的小屏幕（缩放比例可以通过minimum-scale和maxmum-scale进行设定），因此用户在mobile看这个页面时感觉字体就比较小了，也比较模糊，必须要放大才能看得真切。但是网站制作人员可以通过设置viewport来解决，
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
viewport有如下几个属性，width设置viewport的宽度，即mobile最初模拟PC浏览器的宽度，之后mobile会这个宽度展现的页面同比缩放到mobile屏幕上。设置width=device-width后就不会再进行缩放了，因为宽度正好和mobile的宽度相同（前提是没有设置缩放比例）。 minimum-scale和maximum-scale是控制用户允许设置的缩放比例的。user-scalable标识是否允许对页面进行缩放，取值有两个yes和no。设置为no则不允许进行页面缩放了。initial-scale设置 用户最初看到页面时的缩放比例。 我们可以直接在html页面设置好，也可以通过JavaScript来设置，Tangram Mobile实现了相应的设置方法，baidu.page.setNoScale 设置页面默认不缩放，并且不可缩放
设置media
我们可以利用link标签的media属性来限制CSS的应用范围，通过max-device-width：480px 屏蔽PC；通过only screen屏蔽屏幕阅读设备； 通过orientation: portrait来区分横屏竖屏，
@media all and (min-width:500px) { … } @media (min-width:500px) { … } @media (orientation: portrait) { … }
@media all and (orientation: portrait) { … } @media screen and (min-width: 400px) and (max-width: 700px) { … }
设置网页的桌面快捷方式图标
在iphone、itouch和ipad上，用户可以为网页设置桌面快捷方式，系统会自动截图为网页快捷方式生成一个图标，但是截图一般都不太好看， 我们可以事先为网页设置好快捷方式图标，这样系统会自动使用这个图标。我们可以这样设置，
<link rel="apple-touch-icon" href="apple-touch-icon.png"/> <link rel="apple-touch-startup-image" href="startup.png"/>
第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要网页设计师做圆角和高亮效果，系统会自动帮你搞定这个 放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标。第二行是设置启动画面。我们也可以采用 Tangram Mobile的方法来设置，
baidu.page.setWebApp
隐藏地址栏
很多文档介绍通过调用
window.scrollTo(0, 1);
就可以隐藏地址栏，但是通过实践发现隐藏地址栏还是真够坑爹的啊，只调用这一句话一般不会起作用，我们需要function hideBar() { setTimeout( function() { window.scrollTo(0, 1); }, 0); };
但是有时候我们发现还是隐藏不了地址栏，为什么呢？大多时候是因为页面高度不够隐藏地址栏，这样我们需要先 把body高度设置够搞，隐藏地址栏后再还原回来，
function hideBar() { document.body.style.height = Math.max(windows.innerHeight, windows.innerWidth) * 2 +
'px'; setTimeout( function() { window.scrollTo(0, 1); setTimeout( function() { document.body.style.height = windows.innerHeight + 'px'; }, 200); }, 0); };
好了这回终于可以隐藏地址栏了，但是我们又发现获取的innerHeight是隐藏地址栏之前的数值， 怎么办呢，嗯，看来还需要一个回调函数，这样我们的方法又变成，
function hideBar(fn) { document.body.style.height = Math.max(windows.innerHeight, windows.innerWidth) * 2 + 'px'; setTimeout( function()
{ window.scrollTo(0, 1); setTimeout( function() { document.body.style.height = windows.innerHeight + 'px'; fn && fn(); },
200); }, 0); };
在实际应用的时候会发现有些机器反应比较慢，这样setTimeout的时间也可以加长些，唉，隐藏个地址栏竟然也这么麻烦， Tangram Mobile中已经实现了hideBar方法，还是建议大家直接使用baidu.page.hideBar吧。 有些时候需要判断当前是否已经隐藏了地址栏，可以使用window.pageYOffset来判断。
获取设备翻转状态
我们可以通过获取orientation的值来判断翻转状态，那如果设备不支持orientation怎么样，那我们可以通过 innerWidth和innerHeight的比例来判断翻转状态，代码如下（取自Tangram Mobile的getOrientation），
baidu.page.getOrientation = function() { if ("onorientationchange" in window)
{ return (window.orientation == 0 || window.orientation == 180) ? 'portrait' : 'landscape'; }
else { return (windows.innerHeight > windows.innerWidth) ? 'portrait' : 'landscape'; } };
position:fixed
在pc上网站建设经常使用position:fixed，在iphone上似乎并不管用，官方给了很多解释，但是它还是不好使，这样我们只能自己来 实现这种效果，首先我们需要一个setPosition方法，
function setPosition(top, left){ //根据top、left把元素设置到视图区相应位置 }
然后，我们需要注册scroll事件和onrientation事件
element.addEventListener('scroll', setPosition); element.addEventListener('onrientationchange', setPosition);具体代码可以参考Tangram Mobile的Toolbar组件
overflow:scroll
在iphone上开发web程序，overflow:scroll十分让人头疼，因为iphone并不支持，官方依然给了很多解释，我们还是需要自己来实现， 因为不支持overflow:scroll，我们只能设置为overflow:hidden，然后在内容上注册scroll和touch事件，当touch事件被触发的时候， 把隐藏的内容显示出来。这个功能比较复杂，我们可以使用Tangram Mobile的Scroller组件。
注：ios5已经解决了position:fixed和overflow:scroll的问题
