html5移动开发总结

来源：互联网发布：智能楼宇网络设计编辑：程序博客网时间：2024/05/12 09:03

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&amp;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">

这段代码的作用是，在程序启动、加载的时候，显示一个预加载的界面，告诉用户该程序正在加载

0 0