html5移动开发总结

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值