1、清除html5的默认样式
aritcle,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
2、使html5元素在旧版本IE中变为块儿级元素:
只需部分元素变为块级元素,不是所有的html5元素都显示为块儿级元素。
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}
Google Analytics可以分析浏览我们网站最常用的移动设备,也可以分析网站最受欢迎的部分
3、设置触摸图标
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png">
<link rel="shortcut icon" href="icons/apple-touch-icon.png">
</head>
4、避免文本字体大小重置
在一些移动设备上,当用户把手机切换到横屏模式的时候,浏览器会自动的重置字体大小。可以通过下面的代码避免这种事情的发生。
html{
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
}
上面的代码也并不是完美的,如果我们在pc桌面访问,或者通过其他的非移动设备浏览访问,这样的设置会导致缩放功能被禁用。因此建议使用下面的代码:
html{
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
}
5、优化浏览器视口宽度设置
下面这句话的意思是把视口宽度设置为匹配设备宽度,缩放比例为1
<meta name="viewport" content="width=device-width,initial-scale=1.0">
HTML 如何防止手机浏览页面点击输入框页面会自动放大问题
在head区加入:
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
6、避免横屏下字体突然变大
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
https://gist.github.com/903131
这段代码也并不完美,比如如果用户又突然的从横屏切换到竖屏,文字又会出现问题。个人感觉知道有这个东西就可以了。实际的工作中,如果是一个wap网站,很少会考虑横屏下的效果。
启动手机原生应用
例如下面的代码可以实现调用手机谷歌地图的功能
<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>
除了启动设备上的原生应用,我们还可以做更多的事情。比如下面的这个http链接将会启动用户设备上的GoogleMaps服务。并告诉用户从A地到B地的行车路线
<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>
7、iphone下全屏模式启动
meta name="apple-mobile-web-app-capable" content="yes">
这段代码的意思是党web应用从界面图标启动时,以全屏模式启动,隐藏浏览器上部的工具栏、地址栏和底部的加载状态。
<link rel="apple-touch-startup-image" href="img/1/splash.png">
这段代码的作用是,在程序启动、加载的时候,显示一个预加载的界面,告诉用户该程序正在加载