移动端Web开发笔记

作者: haibao 分类: 笔记 发布时间: 2014-08-03 17:30
我之所谓生存,并不是苟活;所谓温饱,并不是奢侈;所谓发展,也不是放纵。 ——鲁迅

update by haibao at 2017/10/11

最近写的移动端项目,之间遇到的一些问题,记录下来(以后会不断补充的):

1.1: 控制显示区域各种属性:

1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

1.2:IOS中Safari允许全屏浏览:

1
<meta content="yes" name="apple-mobile-web-app-capable">

1.3:IOS中Safari顶端状态条样式:

1
<meta content="black" name="apple-mobile-web-app-status-bar-style">

1.4:忽略将数字变为电话号码:

1
<meta content="telephone=no" name="format-detection">

1.5:  img自适应:

1
img {max-width: 100%;height: auto;width: auto9; /* ie8 */ -ms-interpolation-mode:bicubic; /* 这个在做实时缩放图片、缩略图的时候用处挺大。可以解决缩放失真问题。 IE7 Only */}

1.6:隐藏被旋转的 div 元素的背面,如果在旋转元素不希望看到其背面时,该属性很有用。 for 转场闪屏问题:

1
2
3
4
5
6
div {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
    -moz-backface-visibility:hidden;     /* Firefox */
    -ms-backface-visibility:hidden;     /* Internet Explorer */
}

1.7: -webkit-tap-highlight-color:rgba(255,255,255,0) 可以同时屏蔽ios和Android下点击元素时出现的阴影。
备注:transparent的属性值在android下无效。

1
a,button,input{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; }

1.8:-webkit-appearance:none 可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。

1
input{ resize: none;-webkit-appearance: none;} /*去除iphone自带样式*/

1.9:阻止旋转屏幕时自动调整字体大小

1
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {  -webkit-text-size-adjust:100%; }
1
<strong>2.0:</strong>除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支持DIV的滚动条(说几乎是因为新版的IOS已经支持):解决方法我知道的有2种,一种是iscroll.js。另一种是安卓4和IOS5+都可以使用 CSS3的新属性-Webkit-overflow-scrolling: touch; 来解决. <strong>2.1:media query 条件(判断iphone5/5s/ipad): </strong>
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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .class{}
}
 
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
    .class{}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
    .class{}
}
/**
 *  Galaxy S3 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
 
}
 
/**
 *  Galaxy S3 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
 
}
 
/**
 *  Galaxy S3 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
 
}
 
/**
 *  Galaxy S4 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
 
}
 
/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
 
}
 
/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
 
}
 
/**
 *  Galaxy S5 landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
 
}
 
/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
 
}
 
/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
 
}
 
/**
 *  HTC One landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
 
}
 
/**
 *  HTC One portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
 
}
 
/**
 *  HTC One landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
 
}
 
 
/**
 *  iPad Mini landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
 
}
 
/**
 *  iPad Mini portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
 
}
 
/**
 *  iPad Mini landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
 
}
 
/**
 *  iPad 1/2 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
 
}
 
/**
 *  iPad 1/2 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
 
}
 
/**
 *  iPad 1/2 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
 
}
 
/**
 *  iPad 3/4 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/**
 *  iPad 3/4 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/**
 *  iPad 3/4 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
 
}
 
/**
 *  Galaxy Tab 10.1 landscape & portrait
 */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
 
}
 
/**
 *  Galaxy Tab 10.1 portrait
 */
@media
(max-device-width: 800px)
and (orientation: portrait) {
 
}
 
/**
 *  Galaxy Tab 10.1 landscape
 */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
 
}
 
/**
 *  Asus Nexus 7 landscape & portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
 
}
 
/**
 *  Asus Nexus 7 portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
 
}
 
/**
 *  Asus Nexus 7 landscape
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
 
}
 
/**
 *  Kindle Fire HD 7" landscape & portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
 
}
 
/**
 *  Kindle Fire HD 7" portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
 
/**
 *  Kindle Fire HD 7" landscape
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
 
}
 
/**
 *  Kindle Fire HD 8.9" landscape & portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
 
}
 
/**
 *  Kindle Fire HD 8.9" portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
 
/**
 *  Kindle Fire HD 8.9" landscape
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
 
}
 
/**
 *  Non-Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
 
/**
 *  Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
 
/**
 *  Apple Watch
 */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
 
}
 
/**
 *  Moto 360 Watch
 */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
 
}

2.1 主流分辨率

1
2
3
4
5
Android:主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。
(非主流机型还包括:240x320, 320x480, 640x960 这三种,其中两种都与 iPhone 一致。)
iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。
WP:主流机型主要为 480x800,720x1280, 768x1280 这三种
新增:iPhone6:750*1334 iPHone6s 1242*2208

2.2 使用相对单位

1
2
3
4
5
1、宽、高、填充、边界均使用百分比
2、字体em/rem
em:相对父级
rem(root element):相对根父级
ps:字体单位一览表(各大浏览器默认字体16px)

2.3 使用box-sizing,可以减少很多不必要的计算

兼容性写法:

1
2
3
4
5
    .sizing{
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

2.4 合理使用box-flex,让布局更简单

兼容性写法:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .flex-box{
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        width: 100%; height: 300px;
        margin: 0 auto;
        color: #fff;
        text-align: center;
        font-family: 'Microsoft YaHei';
    }
    .flex1{
        width: 20%; height: 100%;
        background: #ff8989;
        display: block;
    }
    .flex2{
        -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1; /* OLD - Firefox 19- */
        -webkit-flex: 1; /* Chrome */
        -ms-flex: 1; /* IE 10 */
        flex: 1;
        background: #1bbc9b;
    }
    .flex3{
        width: auto;
        width: 20%; height: 100%;
        background: #516d81;
    }
</style>
<body>
    <p>你可以改变屏幕宽度查看效果</p>
    <div class="flex-box">
        <div class="flex1">flex1 <br> 我的宽度为父级的20%;</div>
        <div class="flex2">flex2 <br> 我的宽度为父级宽-(flex1+flex3);</div>
        <div class="flex3">flex3 <br> 我的宽度为父级的20%;</div>
    </div>
</body>
</html>

2.5 使用无衬线字体

1
2
3
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁,原生Android下中文字体与英文字体都选择默认的无衬线字体。

2.6 设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为

1
2
3
4
5
6
7
a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
    user-select: none;
}

2.7 横屏监听

1
2
3
4
5
6
7
8
9
10
var updateOrientation = function(){
    if(window.orientation=='-90' || window.orientation=='90'){
        $('.landscape-wrap').removeClass('hide');
        console.log('为了更好的体验,请将手机/平板竖过来!');
    }else{
        $('.landscape-wrap').addClass('hide');
        console.log('竖屏状态');
    }
};
window.onorientationchange = updateOrientation;

2.8 输入框

1
<input type="text" placeholder="输入回车搜索" autofocus x-webkit-speech>

placeholder是为了设置初始值,并且这个初始值的颜色为灰色,当input的内容变动时,这个值就消失,它的职责就是给人一种亲和力的指示,十分有爱。

autofocus,顾名思义:自动聚焦,当进入当前页面时,这个input会自动获取焦点,而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候,浏览器会选择最后一个带有autofocus属性的input聚焦。

x-webkit-speech,这个大概不必多解释了,webkit核的浏览器(如Chrome)特有的语音识别工具,给input装上也是再好不过的了,话说Google也给自己的搜索框装上这个工具。

关闭Input键盘默认首字母大写:autocapitalize=”off”

2.9 微信开发实现一键拨号出现屏蔽问题的解决方案
打开拨号页面要做下处理,在网址后面增加一个锚节点mp.weixin.qq.com。如:www.hehaibao.com/test.html#mp.weixin.qq.com 这样的话,test.html里的tel一键拨号就可以使用了。

3.0 微信X5内核浏览器不支持flex布局,css3动画性能太差,坑太多

3.1 IOS input type=”search” 如果需要将键盘go变成搜索,需要用form标签包裹,搜索按钮type改成submit,并阻止默认onsubmit行为【tip:阻止默认onsubmit行为,微信和safari中点击无效】

1
2
示例如下:
<form method="post" action=""><input type="search" placeholder="请输入文字"></form>

3.2 移动端keyup有兼容问题,改成foucs+定时器写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
示例如下:
    var $search_ipt = $('#search_ipt'), str = '', search_txt = '';
    $search_ipt.on('focus',function(){
        var time = setInterval(function(){
            search_txt = $.trim($search_ipt.val());
            if(search_txt.length != 0){
                search.searchWords(search_txt); // 请求搜索接口
            }else{
                $search_ipt.val(''); // 清空输入框
            }
            str = search_txt;
        }, 100);
        $(this).bind('blur',function(){
            clearInterval(time);
        });
   });

3.3 移动端调用拍照和相册:
前端本地客户端压缩图片,兼容IOS,Android,PC、自动按需加载文件 https://github.com/think2011/LocalResizeIMG

3.4 关闭首字母大写:autocapitalize=”off”

3.5 只显示纯字母键盘:

1
<input type="text" pattern="[0-9]*"/>

3.6 IOS下摇一摇出现撤销和键入弹框解决方法: 填写输入框后 移除输入框即可

3.7 微信支付 测试目录必须为二级/三级目录结构,比如:pay/html/pay.html。用angularJS路由的话有问题。

3.8 angularJS 路由的“#”号,遇到第三方回调跳转的时候很坑,#号后面参数丢失

3.9 winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

1
<meta name="msapplication-tap-highlight" content="no">

4.0 webkit表单元素的默认外观重置

1
.css{-webkit-appearance:none;}

4.1 webkit表单输入框placeholder的颜色值能改变么

1
2
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

4.2 IE10(winphone8)表单元素默认外观如何重置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//禁用 select 默认下拉箭头
select::-ms-expand {
display: none;
}
 
//禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check
{
display: none;
}
 
//禁用PC端表单输入框默认清除按钮
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear
{
display: none;
}

4.3 手机拍照和上传图片
ps:ios 有拍照、录像、选取本地图片功能,部分android只有选取本地图片功能,winphone不支持

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
<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
 
//上传头像
upload.addEventListener('change', function() {
        var upload = document.getElementById('upload'); //每次要动态获取
        var file = upload.files[0];
 
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            var img = new Image();
            img.src = this.result;
 
            //上传后逻辑
            //my.uploadPic(this.result, function(data){
                //$('.defaultAvatar').find('img').attr('src', data.user_avatar);
            //});
        };
 
        //解决上传相同文件不触发onchange事件
        var clone = upload.cloneNode(true);
        clone.onchange = arguments.callee; //克隆不会复制动态绑定事件
        clone.value = '';
        upload.parentNode.replaceChild(clone, upload);
}, false);
 
 
<!-- 选择视频 -->
<input type=file accept="video/*">

4.4 播放视频不全屏

1
2
3
4
5
6
7
8
<!--
1.ios7+支持自动播放
2.支持Airplay的设备(如:音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

4.5 IOS手机浏览器字体齿轮

1
2
-webkit-font-smoothing: none: 无抗锯齿
-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

4.6 如何修改chrome记住密码后自动填充表单的黄色背景

1
2
3
4
5
input:-webkit-autofill {
  background-color: #FAFFBD;
  background-image: none;
  color: #000;
}

4.7 input [type=search] 搜索框右侧小图标如何美化

1
2
3
4
5
6
7
8
input[type="search"]::-webkit-search-cancel-button{ 
  -webkit-appearance: none;
  height: 15px; 
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;
}
用到的是伪元素::-webkit-search-cancel-button

4.8 android下取消输入语音按钮

1
input::-webkit-input-speech-button {display: none}

4.9 Input 的placeholder会出现文本位置偏上的情况

1
input 的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置: line-height:normal

5.0 当用户把连接保存到手机桌面时使用的图标,如果不设置,则会用网页的截图。有了这,就可以让你的网页像APP一样存在手机里了

1
2
3
<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

5.1 这个是APP启动画面图片,如果不设置,启动画面就是白屏,图片像素就是手机全屏的像素

1
<link rel="apple-touch-startup-image" href="/img/startup.png" />

5.2 模拟:hover伪类

1
2
3
4
5
6
7
8
//js
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
  myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
  myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}
//css
a:hover, a.hover { /* 你的hover效果 */ }

5.3 Andriod 上去掉语音输入按钮

1
input::-webkit-input-speech-button {display: none}

5.4 判断微信浏览器的ua

1
2
3
4
5
6
7
8
function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

本文地址:[移动端Web开发笔记],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>