By Fox Snower

更新日期:

文章目录
  1. 1. 移动web标配html头部
    1. 1.1. telephone
    2. 1.2. email
    3. 1.3. adress
    4. 1.4. 代码
  2. 2. 移动web标配全身模板

移动web标配html头部

Meta标签中的format-detection属性及含义
标签： format-detection telephoneno meta html 移动网页 分类： 移动端开发
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的

format-detection属性主要是有以下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用：

telephone

你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉

这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：
telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！

email

告诉设备不识别邮箱，点击之后不自动发送
email=no禁止作为邮箱地址！
email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！

adress

adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！

代码

1
2
3
4
5
6
7
8
9
10
11
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-
scale=1.0,user-scalable=no">
<!--删除默认的苹果工具栏和菜单栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />    
<!--控制状态栏显示样式//black-translucent灰色 //black黑色--> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--电话、邮件、地址默认格式取消-->
<meta name="format-detection" content="telephone=yes,email=no,adress=yes"/>
<!--手机端点击时，禁止出现灰色区域-->
<meta name="msapplication-tap-highlight" content="no" />
<meta name="format-detection" content="telephone=yes"/>

移动web标配全身模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="zh_cmn">
<head>
    <meta name="description" content="CSS position:flex in mobile" />
    <meta charset=utf-8 />
    <!--
    Created using JS Bin
    http://jsbin.com
    Copyright (c) 2016 by maxzhang (http://jsbin.com/omaCOSir/53/edit)
    Released under the MIT license: http://jsbin.mit-license.org
    -->
    <meta name="robots" content="noindex">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <title>CSS position:flex in mobile</title>
    <style id="jsbin-css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('http://cdn.bootcss.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot');
            src: url('http://cdn.bootcss.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('http://cdn.bootcss.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('http://cdn.bootcss.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('http://cdn.bootcss.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
        }
        .glyphicon {
            font-family: 'Glyphicons Halflings';
            font-size: 24px;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .glyphicon-film:before {
            content: "\e009";
        }
        .glyphicon-qrcode:before {
            content: "\e039";
        }
        .glyphicon-list:before {
            content: "\e056";
        }
        .glyphicon-picture:before {
            content: "\e060";
        }
        .glyphicon-chevron-left:before {
            content: "\e079";
        }
        .glyphicon-calendar:before {
            content: "\e109";
        }
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        a {
            color: #fff;
        }
        header,
        footer {
            width: 100%;
            height: 50px;
        }
        header .fixed,
        footer .fixed {
            position: fixed;
            left: 0;
            width: 100%;
            height: 50px;
        }
        header .fixed .wrap,
        footer .fixed .wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        header .fixed .wrap.float h1,
        footer .fixed .wrap.float h1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 20px;
            line-height: 50px;
            color: #fff;
            text-align: center;
        }
        header .fixed .wrap.float .glyphicon,
        footer .fixed .wrap.float .glyphicon {
            display: inline-block;
            margin: 12px 10px;
            color: #fff;
        }
        header .fixed .wrap.float .left-icon,
        footer .fixed .wrap.float .left-icon {
            float: left;
        }
        header .fixed .wrap.float .right-icon,
        footer .fixed .wrap.float .right-icon {
            float: right;
        }
        header .fixed .wrap.float:before,
        footer .fixed .wrap.float:before,
        header .fixed .wrap.float:after,
        footer .fixed .wrap.float:after {
            content: " ";
            /* 1 */
            display: table;
            /* 2 */
        }
        header .fixed .wrap.float:after,
        footer .fixed .wrap.float:after {
            clear: both;
        }
        header .fixed .wrap.flex,
        footer .fixed .wrap.flex {
            display: -moz-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: -ms-flex;
            display: flex;
        }
        header .fixed .wrap.flex > a,
        footer .fixed .wrap.flex > a {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -webkit-flex: 1 1 0;
            -moz-flex: 1 1 0;
            -ms-flex: 1 1 0;
            flex: 1 1 0;
            text-align: center;
        }
        header .fixed .wrap.flex > a .glyphicon,
        footer .fixed .wrap.flex > a .glyphicon {
            vertical-align: -20px;
        }
        header .fixed {
            top: 0;
            background-color: #45b97c;
        }
        footer .fixed {
            bottom: 0;
            background-color: #464547;
        }
        .main {
            margin: 15px 10px;
        }
    </style>
</head>
<body>
<header>
    <div class="fixed">
        <div class="wrap float">
            <div class="left-icon">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </div>
            <h1>HEADER</h1>
            <div class="right-icon">
                <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-list"></span>
            </div>
        </div>
    </div>
</header>
<div class="main">
    -------------- start --------------<br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    --------------- end ---------------
</div>
<footer>
    <div class="fixed">
        <div class="wrap flex">
            <a href="#"><span class="glyphicon glyphicon-picture"></span></a>
            <a href="#"><span class="glyphicon glyphicon-film"></span></a>
            <a href="#"><span class="glyphicon glyphicon-qrcode"></span></a>
        </div>
    </div>
</footer>
<script src="http://static.jsbin.com/js/render/edit.js?3.38.11"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-1656750-34', 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');
</script>
</body>
</html>