移动开发的一些技巧

一、避免文字字体大小重置

html{

　　-webkit-text-size-adjust:100%;

     -ms-text-size-adjust:100%;

　　text-size-adjust:100%;

}

二、视口大小

对于一些老的浏览器需要使用如下代码：

<meta name="HandeldFriendly" content="true">

对于微软的PocketPC,需要使用一个特别的属性设置

<meat name="mobileOptimized" content="320">

完整的代码如下：

<meta name="HandeldFriendly" content="true">

<meta name="mobileOptimized" content="320">

<meta name="viewport" content="width=device-width">

在加上关于缩放属性

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

在Safai 横屏后文字放大的问题

metas[i].content="width=device-width,minimum-scale=0.25,maximum-scale=1.6";

三、iphone全屏模式启动

全屏启动,隐藏工具栏、地址栏、和底部状态栏

<meta name="apple-mobile-web-app-capable" content="yes">

这段代码的作用是在浏览器的顶部显示一个状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="black">

在程序启动、加载的时候显示一个加载界面，告诉用户程序正在加载

〈link rel="apple-touch-starup-image" href="img/1/splash.png">

四、防止IOs在聚焦是自动缩放

$('input,select,textarea').bind('focus blur',function(event){

$viewportMeta.attr("content",'width=device-width,initial-scale=1,maximum-scale='+(event.type=='blur'?10:1));

})

五、禁止和限制部分webkit特性

 a、禁止自动转化为拨号链接 .nocallout{-webkit-touch-callout:none;}

 b、修改点击后的背景颜色 *{-webkit-tap-highlight-color:rgba(0,0,0,0);}

 c、让界面元素内容可编辑  p{-webkit-appearance:none}

 d、为窄屏添加省略号功能 .ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}