html5移动开发总结

最新推荐文章于 2021-04-22 14:04:19 发布

马果

最新推荐文章于 2021-04-22 14:04:19 发布

阅读量546

点赞数

分类专栏： jquery 文章标签： html5 移动开发

本文链接：https://blog.csdn.net/qq_26722321/article/details/53955396

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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
评论
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
复制链接

扫一扫

专栏目录