电脑技术学习

html5手机网站需要加的那些meta/link标签,html5 meta全解

dn001

6、 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

==================
比较常用的meta

 以下代码参考网址:view-source:三个w点adinnet点cn斜杠service斜杠3d点html

<!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]-->
<!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="title" content="" />
<meta name="author" content="-06" />
<meta name="Copyright" content="" />
<!-- 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核
================================================== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- IOS6全屏 Chrome高版本全屏
================================================== -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- 让360双核浏览器用webkit内核渲染页面
================================================== -->
<meta name="renderer" content="webkit">
<!-- Mobile Specific Metas
================================================== -->
<!-- !!!注意 minimal-ui 是IOS7.1的新属性,最小化浏览器UI -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="format-detection" content="telephone=no">
<!-- CSS
================================================== -->
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/magicwall.css" rel="stylesheet" type="text/css">
<link  href="/css/jquery.gridster.css" rel="stylesheet" type="text/css">
<link href="/css/case.css" rel="stylesheet" type="text/css">
<link href="/css/case_1280.css" rel="stylesheet" type="text/css">
<link href="/css/case_1024.css" rel="stylesheet" type="text/css">
<link href="/css/case_640.css" rel="stylesheet" type="text/css">
<link href="/css/case_320.css" rel="stylesheet" type="text/css">
<link href="/css/style_retina.css" rel="stylesheet" type="text/css">


<!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->


<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico" >
<!-- Android 主屏图标
================================================== --> 
<link rel="icon" sizes="196x196" href="/images/apple-touch-icon-152x152.png">
<!-- IOS 主屏图标
================================================== -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/apple-touch-icon-152x152.png">

<link rel="apple-touch-startup-image" href="/startup-748x1024.jpg"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" >
<link rel="apple-touch-startup-image" href="/startup-768x1004.jpg"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" >

或者说

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">