移动开发的一些技巧
一、避免文字字体大小重置
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}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
