【转】移动开发的一些小技巧

移动html编写的时候一些特定的head代码，网站新网太多了，没发现作者的名称，只粘贴出处表示不是原创文

原文地址：http://www.bubuko.com/infodetail-520511.html

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

html{

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

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

text-size-adjust:100%;

}

二、视口大小

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

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

完整的代码如下：

在加上关于缩放属性

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

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

三、iphone全屏模式启动

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

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

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

〈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}