-
Notifications
You must be signed in to change notification settings - Fork 0
/
mob_com.html
1018 lines (638 loc) · 81.1 KB
/
mob_com.html
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
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next pisces use-motion">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="移动端," />
<link rel="alternate" href="/atom.xml" title="一人一马一江湖" type="application/atom+xml" />
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico?v=5.0.1" />
<meta name="description" content="随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题， 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960 640分辨率，在网页里只显示了480 3">
<meta name="keywords" content="移动端">
<meta property="og:type" content="article">
<meta property="og:title" content="移动端常见的一些兼容性问题">
<meta property="og:url" content="http://loeuy.cn/mob_com.html">
<meta property="og:site_name" content="一人一马一江湖">
<meta property="og:description" content="随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题， 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960 640分辨率，在网页里只显示了480 3">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-05-27T13:52:21.957Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="移动端常见的一些兼容性问题">
<meta name="twitter:description" content="随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题， 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960 640分辨率，在网页里只显示了480 3">
<script type="text/javascript" id="hexo.configuration">
var NexT = window.NexT || {};
var CONFIG = {
scheme: 'Pisces',
sidebar: {"position":"right","display":"post"},
fancybox: true,
motion: true,
duoshuo: {
userId: undefined,
author: 'Author'
}
};
</script>
<link rel="canonical" href="http://loeuy.cn/mob_com.html"/>
<title> 移动端常见的一些兼容性问题 | 一人一马一江湖 </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?c774939d26e4c1c2c8cad5e33c5a80ff";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<div class="container one-collumn sidebar-position-right page-post-detail ">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('/images/black.jpg');">
<div class="header-inner"><a class="site-home" href="/">一人一马一江湖</a>
<div class="site-meta ">
<div class="custom-logo-site-title">
<div href="/" class="brand">
<span class="logo-line-before"><i></i></span>
<span class="site-title">一人一马一江湖</span>
<span class="logo-line-after"><i></i></span>
</div>
</div>
<p class="site-subtitle">愿你可以朝九晚五，又可以浪迹天涯</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
Categories
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
Archives
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
Tags
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
About
</a>
</li>
<li class="menu-item menu-item-search">
<a href="javascript:;" class="popup-trigger">
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />
Search
</a>
</li>
</ul>
<div class="site-search">
<div class="popup">
<input type="text" id="local-search-input">
<span class="search-icon fa fa-search"></span>
<div id="local-search-result"></div>
<span class="popup-btn-close">close</span>
</div>
</div>
</nav>
</div>
<div class="header-post">
<div class="post-header">
<div class="tags">
<a href="/tags/移动端/" rel="tag" title="移动端">移动端</a>
</div>
<h1>移动端常见的一些兼容性问题</h1>
<h2 class="subtitle"></h2>
<div class="post-time">
<span class="post-meta-item-text">Posted on </span>
<time itemprop="dateCreated" datetime="2017-06-14T18:04:45+08:00" content="2017-06-14" title="2017-06-14 18:04:45">
2017-06-14
</time>
</div>
</div>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
移动端常见的一些兼容性问题
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2017-06-14T18:04:45+08:00" content="2017-06-14">
2017-06-14
</time>
</span>
<!--
-->
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，</p>
<h5 id="1、安卓浏览器看背景图片，有些设备会模糊。"><a href="#1、安卓浏览器看背景图片，有些设备会模糊。" class="headerlink" title="1、安卓浏览器看背景图片，有些设备会模糊。"></a>1、安卓浏览器看背景图片，有些设备会模糊。</h5><p>用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？</p>
<p>经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960 <em> 640分辨率，在网页里只显示了480 </em> 320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。</p>
<a id="more"></a>
<p>想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100 <em> 100，背景图必须得200 </em> 200，然后background-size:contain;，这样显示出来的图片就比较清晰了。</p>
<p>代码可以如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background:url(../images/icon/all.png) no-repeat center center;</span><br><span class="line"><span class="selector-tag">-webkit-background-size</span><span class="selector-pseudo">:50px</span> 50<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-tag">background-size</span>: 50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span>;<span class="selector-tag">display</span><span class="selector-pseudo">:inline-block</span>; <span class="selector-tag">width</span><span class="selector-pseudo">:100</span>%; <span class="selector-tag">height</span><span class="selector-pseudo">:50px</span>;</span><br></pre></td></tr></table></figure>
<p>或者指定 background-size:contain;都可以，大家试试！</p>
<h5 id="2、图片加载"><a href="#2、图片加载" class="headerlink" title="2、图片加载"></a>2、图片加载</h5><p>若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：</p>
<p>具体的canvas API 参见：<a href="http://javascript.ruanyifeng.com/htmlapi/canvas.html" target="_blank" rel="noopener">http://javascript.ruanyifeng.com/htmlapi/canvas.html</a></p>
<p>下面举例说明一个canvas的例子：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">canvas</span>></span><span class="tag"></<span class="name">canvas</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line">//js动态加载图片和li 总共举例17张图片！</span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> total=<span class="number">17</span>; </span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> zWin=$(<span class="built_in">window</span>); </span></span><br><span class="line"><span class="javascript">varrender=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> padding=<span class="number">2</span>; </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> winWidth=zWin.width(); </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> picWidth=<span class="built_in">Math</span>.floor((winWidth-padding*<span class="number">3</span>)/<span class="number">4</span>); </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> tmpl =<span class="string">''</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i<=totla;i++){ </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> p=padding; </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> imgSrc=<span class="string">'img/'</span>+i+<span class="string">'.jpg'</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">if</span>(i%<span class="number">4</span>==<span class="number">1</span>){</span></span><br><span class="line"><span class="undefined"> p=0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="javascript"> tmpl +=<span class="string">'<li style="width:'</span>+picWidth+<span class="string">'px;height:'</span>+picWidth+<span class="string">'px;padding-left:'</span>+p+<span class="string">'px;padding-top:'</span>+padding+<span class="string">'px;"><canvas id="cvs_'</span>+i+<span class="string">'"></canvas></li>'</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> imageObj = newImage(); </span></span><br><span class="line"><span class="undefined"> imageObj.index = i; </span></span><br><span class="line"><span class="javascript"> imageObj.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> cvs =$(<span class="string">'#cvs_'</span>+<span class="keyword">this</span>.index)[<span class="number">0</span>].getContext(<span class="string">'2d'</span>);</span></span><br><span class="line"><span class="javascript"> cvs.width = <span class="keyword">this</span>.width;</span></span><br><span class="line"><span class="javascript"> cvs.height=<span class="keyword">this</span>.height;</span></span><br><span class="line"><span class="javascript"> cvs.drawImage(<span class="keyword">this</span>,<span class="number">0</span>,<span class="number">0</span>);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> imageObj.src=imgSrc;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined">}</span></span><br><span class="line"><span class="undefined">render();</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h5 id="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs"><a href="#3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs" class="headerlink" title="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs"></a>3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs</h5><p>zeptojs内置Touch events方法，具体可以看<a href="http://zeptojs.com/#Touch" target="_blank" rel="noopener">http://zeptojs.com/#Touch</a> events</p>
<p>看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！</p>
<h5 id="4、防止手机中网页放大和缩小。"><a href="#4、防止手机中网页放大和缩小。" class="headerlink" title="4、防止手机中网页放大和缩小。"></a>4、防止手机中网页放大和缩小。</h5><p>这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport</p>
<p>还有就是，有些手机网站我们看到如下声明：</p>
<p>代码如下:</p>
<p><code><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"></code></p>
<p>设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明<!DOCTYPE html>。</p>
<p>使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。</p>
<p><code><meta name="viewport"content="user-scalable=0"/></code></p>
<p>但是为了更好的兼容，我们会使用完整的viewport设置。</p>
<p><a href="">复制代码</a>代码如下:</p>
<p><code><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /></code></p>
<p>当然，<code>user-scalable=0</code>,有的人也写成<code>user-scalable=no</code>，都可以的。</p>
<h5 id="5、apple-mobile-web-app-capable"><a href="#5、apple-mobile-web-app-capable" class="headerlink" title="5、apple-mobile-web-app-capable"></a>5、apple-mobile-web-app-capable</h5><p>apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。</p>
<p>语法：</p>
<p><code><meta name="apple-mobile-web-app-capable"content="yes"></code></p>
<p>说明：</p>
<p>如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。</p>
<h5 id="6、format-detection"><a href="#6、format-detection" class="headerlink" title="6、format-detection"></a>6、format-detection</h5><p>format-detection 启动或禁用自动识别页面中的电话号码。</p>
<p>语法：</p>
<p><code><meta name="format-detection"content="telephone=no"></code></p>
<p>说明：</p>
<p>默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。</p>
<h5 id="7、html5调用安卓或者ios的拨号功能"><a href="#7、html5调用安卓或者ios的拨号功能" class="headerlink" title="7、html5调用安卓或者ios的拨号功能"></a>7、html5调用安卓或者ios的拨号功能</h5><p>html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。</p>
<p>如下：</p>
<p><code><a href="tel:4008106999,1034">400-810-6999 转 1034</a></code></p>
<p>拨打手机直接如下</p>
<p><code><a href="tel:15677776767">点击拨打15677776767</a></code></p>
<h5 id="8、html5GPS定位功能"><a href="#8、html5GPS定位功能" class="headerlink" title="8、html5GPS定位功能"></a>8、html5GPS定位功能</h5><p>具体请看：<a href="http://www.w3school.com.cn/html5/html_5_geolocation.asp" target="_blank" rel="noopener">http://www.w3school.com.cn/html5/html_5_geolocation.asp</a></p>
<h5 id="9、上下拉动滚动条时卡顿、慢"><a href="#9、上下拉动滚动条时卡顿、慢" class="headerlink" title="9、上下拉动滚动条时卡顿、慢"></a>9、上下拉动滚动条时卡顿、慢</h5><p><code>body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}</code></p>
<p>Android3+和iOS5+支持CSS3的新属性为overflow-scrolling</p>
<h5 id="10、禁止复制、选中文本"><a href="#10、禁止复制、选中文本" class="headerlink" title="10、禁止复制、选中文本"></a>10、禁止复制、选中文本</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span> {<span class="attribute">-webkit-user-select</span>:none;</span><br><span class="line"> <span class="attribute">-moz-user-select</span>:none;</span><br><span class="line"> <span class="attribute">-khtml-user-select</span>:none;</span><br><span class="line"> <span class="attribute">user-select</span>:none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>解决移动设备可选中页面文本(视产品需要而定)</p>
<h5 id="11、长时间按住页面出现闪退"><a href="#11、长时间按住页面出现闪退" class="headerlink" title="11、长时间按住页面出现闪退"></a>11、长时间按住页面出现闪退</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">element</span> {</span><br><span class="line"> <span class="attribute">-webkit-touch-callout</span>:none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="12、iphone及ipad下输入框默认内阴影"><a href="#12、iphone及ipad下输入框默认内阴影" class="headerlink" title="12、iphone及ipad下输入框默认内阴影"></a>12、iphone及ipad下输入框默认内阴影</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span>{</span><br><span class="line"> <span class="attribute">-webkit-appearance</span>:none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="13、ios和android下触摸元素时出现半透明灰色遮罩"><a href="#13、ios和android下触摸元素时出现半透明灰色遮罩" class="headerlink" title="13、ios和android下触摸元素时出现半透明灰色遮罩"></a>13、ios和android下触摸元素时出现半透明灰色遮罩</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span> {</span><br><span class="line"> <span class="attribute">-webkit-tap-highlight-color</span>:<span class="built_in">rgba</span>(255,255,255,0)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。</p>
<p>后面一篇文章有详细介绍，地址：<a href="http://www.jb51.net/post/phone_web_ysk" target="_blank" rel="noopener">http://www.jb51.net/post/phone_web_ysk</a></p>
<h5 id="14、active兼容处理-即-伪类-active-失效"><a href="#14、active兼容处理-即-伪类-active-失效" class="headerlink" title="14、active兼容处理 即 伪类 :active 失效"></a>14、active兼容处理 即 伪类 :active 失效</h5><p>方法一：body添加ontouchstart</p>
<p><code><body ontouchstart=""></code></p>
<p>方法二：js给 document 绑定 touchstart 或 touchend 事件<br><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><<span class="selector-tag">style</span>></span><br><span class="line"> <span class="selector-tag">a</span> {</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> {</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#fff</span>;</span><br><span class="line"> }</span><br><span class="line"> </style></span><br><span class="line"> <a herf=foo >bar</a></span><br><span class="line"> <<span class="selector-tag">script</span>></span><br><span class="line"> document.addEventListener('touchstart',function(){},false);</span><br><span class="line"></script></span><br></pre></td></tr></table></figure></p>
<h5 id="15、动画定义3D启用硬件加速"><a href="#15、动画定义3D启用硬件加速" class="headerlink" title="15、动画定义3D启用硬件加速"></a>15、动画定义3D启用硬件加速</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span> {</span><br><span class="line"> <span class="attribute">-webkit-transform</span>:<span class="built_in">translate3d</span>(0,0,0)</span><br><span class="line"> transform: <span class="built_in">translate3d</span>(0,0,0);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>注意：3D变形会消耗更多的内存与功耗</p>
<h5 id="16、Retina屏的1px边框"><a href="#16、Retina屏的1px边框" class="headerlink" title="16、Retina屏的1px边框"></a>16、Retina屏的1px边框</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span>{</span><br><span class="line"> <span class="attribute">border-width</span>:thin;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="17、webkit-mask-兼容处理"><a href="#17、webkit-mask-兼容处理" class="headerlink" title="17、webkit mask 兼容处理"></a>17、webkit mask 兼容处理</h5><p>某些低端手机不支持css3 mask，可以选择性的降级处理。</p>
<p>比如可以使用js判断来引用不同class：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="string">'WebkitMask'</span>indocument.documentElement.style){</span><br><span class="line"> alert(<span class="string">'支持mask'</span>);</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"> alert(<span class="string">'不支持mask'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="18、旋转屏幕时，字体大小调整的问题"><a href="#18、旋转屏幕时，字体大小调整的问题" class="headerlink" title="18、旋转屏幕时，字体大小调整的问题"></a>18、旋转屏幕时，字体大小调整的问题</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span>, <span class="selector-tag">body</span>, <span class="selector-tag">form</span>, <span class="selector-tag">fieldset</span>, <span class="selector-tag">p</span>, <span class="selector-tag">div</span>, <span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>{</span><br><span class="line"> <span class="attribute">-webkit-text-size-adjust</span>:<span class="number">100%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="19、transition闪屏"><a href="#19、transition闪屏" class="headerlink" title="19、transition闪屏"></a>19、transition闪屏</h5><p>设置内嵌的元素在3D 空间如何呈现：保留3D<br><code>-webkit-transform-style: preserve-3d;</code><br>设置进行转换的元素的背面在面对用户时是否可见：隐藏 /<br><code>-webkit-backface-visibility:hidden;</code></p>
<h5 id="20、圆角bug"><a href="#20、圆角bug" class="headerlink" title="20、圆角bug"></a>20、圆角bug</h5><p>某些Android手机圆角失效</p>
<p><code>background-clip: padding-box;</code></p>
<h5 id="21、顶部状态栏背景色"><a href="#21、顶部状态栏背景色" class="headerlink" title="21、顶部状态栏背景色"></a>21、顶部状态栏背景色</h5><p><code>meta name="apple-mobile-web-app-status-bar-style"content="black"/></code></p>
<p>说明：</p>
<p>除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。</p>
<p>如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。</p>
<h5 id="22、设置缓存"><a href="#22、设置缓存" class="headerlink" title="22、设置缓存"></a>22、设置缓存</h5><p><code><meta http-equiv="Cache-Control"content="no-cache"/></code></p>
<p>手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。</p>
<h5 id="23、桌面图标"><a href="#23、桌面图标" class="headerlink" title="23、桌面图标"></a>23、桌面图标</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">href</span>=<span class="string">"touch-icon-iphone.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">sizes</span>=<span class="string">"76x76"</span><span class="attr">href</span>=<span class="string">"touch-icon-ipad.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">sizes</span>=<span class="string">"120x120"</span><span class="attr">href</span>=<span class="string">"touch-icon-iphone-retina.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">sizes</span>=<span class="string">"152x152"</span><span class="attr">href</span>=<span class="string">"touch-icon-ipad-retina.png"</span>/></span></span><br></pre></td></tr></table></figure>
<p>iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。</p>
<p>上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！</p>
<p> <code><link rel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/></code></p>
<p>图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)</p>
<h5 id="24、启动画面"><a href="#24、启动画面" class="headerlink" title="24、启动画面"></a>24、启动画面</h5><p><code><link rel="apple-touch-startup-image"href="start.png"/></code></p>
<p>iOS下页面启动加载时显示的画面图片，避免加载时的白屏。</p>
<p>可以通过madia来指定不同的大小：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--iPhone--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-320x460.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 320px)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/></span></span><br><span class="line"><span class="comment"><!-- iPhone Retina --></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-640x920.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/></span></span><br><span class="line"><span class="comment"><!-- iPhone 5--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span><span class="attr">media</span>=<span class="string">"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-640x1096.png"</span>></span>t</span><br><span class="line"><span class="comment"><!-- iPad portrait--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-768x1004.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 768px) and (orientation: portrait)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/></span>t</span><br><span class="line"><span class="comment"><!-- iPad landscape--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-748x1024.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 768px) and (orientation: landscape)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/></span>t</span><br><span class="line"><span class="comment"><!-- iPad Retina portrait--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-1536x2008.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/></span>t</span><br><span class="line"><span class="comment"><!-- iPad Retina landscape--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-1496x2048.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"</span><span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/></span></span><br></pre></td></tr></table></figure>
<h5 id="25、浏览器私有及其它meta"><a href="#25、浏览器私有及其它meta" class="headerlink" title="25、浏览器私有及其它meta"></a>25、浏览器私有及其它meta</h5><p>以下属性在项目中没有应用过，可以写一个demo测试以下！</p>
<p>QQ浏览器私有</p>
<p>全屏模式</p>
<p><code><meta name="x5-fullscreen"content="true"></code></p>
<p>强制竖屏</p>
<p><code><meta name="x5-orientation"content="portrait"></code></p>
<p>强制横屏</p>
<p><code><meta name="x5-orientation"content="landscape"></code></p>
<p>应用模式</p>
<p><code>meta name="x5-page-mode"content="app"></code></p>
<p>UC浏览器私有</p>
<p>全屏模式</p>
<p><code><meta name="full-screen"content="yes"></code></p>
<p>强制竖屏</p>
<p><code><meta name="screen-orientation"content="portrait"></code></p>
<p>强制横屏</p>
<p><code><meta name="screen-orientation"content="landscape"></code></p>
<p>应用模式</p>
<p><code><meta name="browsermode"content="application"></code></p>
<p>其它</p>
<p>针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓<br><code><meta name="HandheldFriendly"content="true"></code><br>微软的老式浏览器<br><code><meta name="MobileOptimized"content="320"></code><br>windows phone 点击无高光<br><code><meta name="msapplication-tap-highlight"content="no"></code></p>
<h5 id="26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好"><a href="#26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好" class="headerlink" title="26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好"></a>26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好</h5><p>问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！</p>
<p>解决办法：</p>
<p>可以用html5的oninput事件去代替keyup<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><input type=<span class="string">"text"</span>id=<span class="string">"testInput"</span>></span><br><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="built_in">document</span>.getElementById(<span class="string">'testInput'</span>).addEventListener(<span class="string">'input'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> value = e.target.value;</span><br><span class="line"> });</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure></p>
<p>然后就达到类似keyup的效果！</p>
<h5 id="27、h5网站input-设置为type-number的问题"><a href="#27、h5网站input-设置为type-number的问题" class="headerlink" title="27、h5网站input 设置为type=number的问题"></a>27、h5网站input 设置为type=number的问题</h5><p>h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。</p>
<p>问题一解决，我目前用的是js。如下<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><input type=<span class="string">"number"</span>oninput=<span class="string">"checkTextLength(this ,10)"</span>></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkTextLength</span>(<span class="params">obj, length</span>) </span>{ </span><br><span class="line"> <span class="keyword">if</span>(obj.value.length > length) { </span><br><span class="line"> obj.value = obj.value.substr(<span class="number">0</span>, length); </span><br><span class="line"> } </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：</p>
<p><code><input type="number" step="0.01"/></code></p>
<p>关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。</p>
<p>假如step和min一起使用，那么数值必须在min和max之间。</p>
<p>看下面的例子：</p>
<p><code><input type="number"step="3.1"min="1"/></code></p>
<p>输入框可以输入哪些数字？</p>
<p>首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。</p>
<p>问题三，去除input默认样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=number]</span> {</span><br><span class="line"> <span class="attribute">-moz-appearance</span>:textfield;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=number]</span><span class="selector-pseudo">::-webkit-inner-spin-button</span>,</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=number]</span><span class="selector-pseudo">::-webkit-outer-spin-button</span> {</span><br><span class="line"> <span class="attribute">-webkit-appearance</span>:none;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="28、ios-设置input-按钮样式会被默认样式覆盖"><a href="#28、ios-设置input-按钮样式会被默认样式覆盖" class="headerlink" title="28、ios 设置input 按钮样式会被默认样式覆盖"></a>28、ios 设置input 按钮样式会被默认样式覆盖</h5><p>解决方式如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span>,<span class="selector-tag">textarea</span> {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">0</span>; </span><br><span class="line"> <span class="attribute">-webkit-appearance</span>: none; </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>设置默认样式为none</p>
<h5 id="29、IOS键盘字母输入，默认首字母大写"><a href="#29、IOS键盘字母输入，默认首字母大写" class="headerlink" title="29、IOS键盘字母输入，默认首字母大写"></a>29、IOS键盘字母输入，默认首字母大写</h5><p>解决方案，设置如下属性</p>
<p><code><input type="text"autocapitalize="off"/></code></p>
<h5 id="30、select-下拉选择设置右对齐"><a href="#30、select-下拉选择设置右对齐" class="headerlink" title="30、select 下拉选择设置右对齐"></a>30、select 下拉选择设置右对齐</h5><p>设置如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">select</span> <span class="selector-tag">option</span> {</span><br><span class="line"> <span class="attribute">direction</span>: rtl;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"><a href="#31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象" class="headerlink" title="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"></a>31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象</h5><p>可以设置如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">-webkit-transform</span>: <span class="selector-tag">rotate</span>(<span class="selector-tag">-4deg</span>) <span class="selector-tag">skew</span>(10<span class="selector-tag">deg</span>) <span class="selector-tag">translateZ</span>(0);</span><br><span class="line"> <span class="selector-tag">transform</span>: <span class="selector-tag">rotate</span>(<span class="selector-tag">-4deg</span>) <span class="selector-tag">skew</span>(10<span class="selector-tag">deg</span>) <span class="selector-tag">translateZ</span>(0);</span><br><span class="line"> <span class="selector-tag">outline</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-tag">rgba</span>(255,255,255,0)</span><br></pre></td></tr></table></figure>
<h5 id="32、移动端点击300ms延迟"><a href="#32、移动端点击300ms延迟" class="headerlink" title="32、移动端点击300ms延迟"></a>32、移动端点击300ms延迟</h5><p>300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。</p>
<p>推荐两个js，一个是fastclick，一个是tap.js</p>
<p>关于300ms延迟，具体请看：<a href="http://thx.github.io/mobile/300ms-click-delay/" target="_blank" rel="noopener">http://thx.github.io/mobile/300ms-click-delay/</a></p>
<h5 id="33、移动端点透问题"><a href="#33、移动端点透问题" class="headerlink" title="33、移动端点透问题"></a>33、移动端点透问题</h5><p>案例如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"haorooms"</span>></span>点头事件测试<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"www.baidu.net"</span>></span>www.baidu.com<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure></p>
<p>div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#haorooms'</span>).on(<span class="string">'tap'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="string">'#haorooms'</span>).hide();</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。</p>
<p>原因：</p>
<p>touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。<br>解决：</p>
<p>（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。<br>（2）用fastclick，<a href="https://github.com/ftlabs/fastclick" target="_blank" rel="noopener">https://github.com/ftlabs/fastclick</a><br>（3）用preventDefault阻止a标签的click<br>（4）延迟一定的时间(300ms+)来处理事件 （不推荐）<br>（5）以上一般都能解决，实在不行就换成click事件。<br>下面介绍一下touchend事件，如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#haorooms"</span>).on(<span class="string">"touchend"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> event.preventDefault();</span><br><span class="line"> });</span><br></pre></td></tr></table></figure>
<h5 id="34、消除-IE10-里面的那个叉号"><a href="#34、消除-IE10-里面的那个叉号" class="headerlink" title="34、消除 IE10 里面的那个叉号"></a>34、消除 IE10 里面的那个叉号</h5><p><code>input:-ms-clear{display:none;}</code></p>
<h5 id="35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等"><a href="#35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等" class="headerlink" title="35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)"></a>35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)</h5><p>iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">-webkit-text-size-adjust</span><span class="selector-pseudo">:100</span>%;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">-ms-text-size-adjust</span><span class="selector-pseudo">:100</span>%;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">text-size-adjust</span><span class="selector-pseudo">:100</span>%;</span><br></pre></td></tr></table></figure>
<h5 id="36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"><a href="#36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格" class="headerlink" title="36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"></a>36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格</h5><p>可以通过正则去掉</p>
<p><code>his.value = this.value.replace(/\u2006/g,'');</code></p>
<h5 id="37、移动端-HTML5-audio-autoplay-失效问题"><a href="#37、移动端-HTML5-audio-autoplay-失效问题" class="headerlink" title="37、移动端 HTML5 audio autoplay 失效问题"></a>37、移动端 HTML5 audio autoplay 失效问题</h5><p>这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。</p>
<p>解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。</p>
<p>解决代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'touchstart'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">document</span>.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>].play();</span><br><span class="line"> <span class="built_in">document</span>.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>].pause();</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h5 id="38、移动端-HTML5-input-date-不支持-placeholder-问题"><a href="#38、移动端-HTML5-input-date-不支持-placeholder-问题" class="headerlink" title="38、移动端 HTML5 input date 不支持 placeholder 问题"></a>38、移动端 HTML5 input date 不支持 placeholder 问题</h5><p>这个我感觉没有什么好的解决方案，用如下方法</p>
<p><a href="">复制代码</a>代码如下:</p>
<p><code><input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date"></code></p>
<p>有的浏览器可能要点击两遍！</p>
<h5 id="39、部分机型存在type为search的input，自带close按钮样式修改方法"><a href="#39、部分机型存在type为search的input，自带close按钮样式修改方法" class="headerlink" title="39、部分机型存在type为search的input，自带close按钮样式修改方法"></a>39、部分机型存在type为search的input，自带close按钮样式修改方法</h5><p>有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#Search</span><span class="selector-pseudo">::-webkit-search-cancel-button</span>{</span><br><span class="line"> <span class="attribute">display</span>:none; </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。</p>
<h5 id="40、唤起select的option展开"><a href="#40、唤起select的option展开" class="headerlink" title="40、唤起select的option展开"></a>40、唤起select的option展开</h5><p>zepto方式:</p>
<p><code>$(sltElement).trrgger("mousedown");</code></p>
<p>原生js方式:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">functionshowDropdown(sltElement) {</span><br><span class="line"> <span class="keyword">var</span> event;</span><br><span class="line"> event = <span class="built_in">document</span>.createEvent(<span class="string">'MouseEvents'</span>);</span><br><span class="line"> event.initMouseEvent(<span class="string">'mousedown'</span>,<span class="literal">true</span>,<span class="literal">true</span>, <span class="built_in">window</span>);</span><br><span class="line"> sltElement.dispatchEvent(event);</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<p>文章转载：<a href="http://www.jb51.net/article/84973.html" target="_blank" rel="noopener">http://www.jb51.net/article/84973.html</a> 已修改~</p>
</div>
<div>
</div>
<div>
<div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
<div>您的支持将鼓励我继续创作！</div>
<button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
<span>赏</span>
</button>
<div id="QR" style="display: none;">
<div id="wechat" style="display: inline-block">
<img id="wechat_qr" src="/images/pay/wPay.jpg" alt="荣嬷嬷 WeChat Pay"/>
<p>微信打赏</p>
</div>
<div id="alipay" style="display: inline-block">
<img id="alipay_qr" src="/images/pay/aPay.jpg" alt="荣嬷嬷 Alipay"/>
<p>支付宝打赏</p>
</div>
</div>
</div>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/移动端/" rel="tag">#移动端</a>
</div>
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/100question.html" rel="next" title="2017年前端面试题整理汇总100题">
<i class="fa fa-chevron-left"></i> 2017年前端面试题整理汇总100题
</a>
</div>
<div class="post-nav-prev post-nav-item">
<a href="/ClassName.html" rel="prev" title="ClassName命名">
ClassName命名 <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</article>
<div class="post-spread">
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_cqq"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_renren"></a>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_kaixin001"></a>
<a class="jiathis_button_copy"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
</div>
</div>
</div>
<div class="comments" id="comments">
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
Table of Contents
</li>
<li class="sidebar-nav-overview" data-target="site-overview">
Overview
</li>
</ul>
<section class="site-overview sidebar-panel ">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="/images/author.jpg"
alt="荣嬷嬷" />
<p class="site-author-name" itemprop="name">荣嬷嬷</p>
<p class="site-description motion-element" itemprop="description">start from zero</p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">8</span>
<span class="site-state-item-name">posts</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags">
<span class="site-state-item-count">4</span>
<span class="site-state-item-name">tags</span>
</a>
</div>
</nav>
<div class="feed-link motion-element">
<a href="/atom.xml" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/RongMo" target="_blank" title="GitHub">
<i class="fa fa-fw fa-github"></i>
GitHub
</a>
</span>
<span class="links-of-author-item">
<a href="https://twitter.com/RongM0Mo" target="_blank" title="Twitter">
<i class="fa fa-fw fa-twitter"></i>
Twitter
</a>
</span>
<span class="links-of-author-item">
<a href="http://weibo.com/omgonR" target="_blank" title="微博">
<i class="fa fa-fw fa-weibo"></i>
微博
</a>
</span>
<span class="links-of-author-item">
<a href="https://www.zhihu.com/people/rongmo" target="_blank" title="知乎">
<i class="fa fa-fw fa-globe"></i>
知乎
</a>
</span>
</div>
<div class="cc-license motion-element" itemprop="license">
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0" class="cc-opacity" target="_blank">
<img src="/images/cc-by-nc-sa.svg" alt="Creative Commons" />
</a>
</div>
</section>
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">
<div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-5"><a class="nav-link" href="#1、安卓浏览器看背景图片，有些设备会模糊。"><span class="nav-number">1.</span> <span class="nav-text">1、安卓浏览器看背景图片，有些设备会模糊。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2、图片加载"><span class="nav-number">2.</span> <span class="nav-text">2、图片加载</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs"><span class="nav-number">3.</span> <span class="nav-text">3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#4、防止手机中网页放大和缩小。"><span class="nav-number">4.</span> <span class="nav-text">4、防止手机中网页放大和缩小。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#5、apple-mobile-web-app-capable"><span class="nav-number">5.</span> <span class="nav-text">5、apple-mobile-web-app-capable</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#6、format-detection"><span class="nav-number">6.</span> <span class="nav-text">6、format-detection</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#7、html5调用安卓或者ios的拨号功能"><span class="nav-number">7.</span> <span class="nav-text">7、html5调用安卓或者ios的拨号功能</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#8、html5GPS定位功能"><span class="nav-number">8.</span> <span class="nav-text">8、html5GPS定位功能</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#9、上下拉动滚动条时卡顿、慢"><span class="nav-number">9.</span> <span class="nav-text">9、上下拉动滚动条时卡顿、慢</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#10、禁止复制、选中文本"><span class="nav-number">10.</span> <span class="nav-text">10、禁止复制、选中文本</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#11、长时间按住页面出现闪退"><span class="nav-number">11.</span> <span class="nav-text">11、长时间按住页面出现闪退</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#12、iphone及ipad下输入框默认内阴影"><span class="nav-number">12.</span> <span class="nav-text">12、iphone及ipad下输入框默认内阴影</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#13、ios和android下触摸元素时出现半透明灰色遮罩"><span class="nav-number">13.</span> <span class="nav-text">13、ios和android下触摸元素时出现半透明灰色遮罩</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#14、active兼容处理-即-伪类-active-失效"><span class="nav-number">14.</span> <span class="nav-text">14、active兼容处理 即 伪类 :active 失效</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#15、动画定义3D启用硬件加速"><span class="nav-number">15.</span> <span class="nav-text">15、动画定义3D启用硬件加速</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#16、Retina屏的1px边框"><span class="nav-number">16.</span> <span class="nav-text">16、Retina屏的1px边框</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#17、webkit-mask-兼容处理"><span class="nav-number">17.</span> <span class="nav-text">17、webkit mask 兼容处理</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#18、旋转屏幕时，字体大小调整的问题"><span class="nav-number">18.</span> <span class="nav-text">18、旋转屏幕时，字体大小调整的问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#19、transition闪屏"><span class="nav-number">19.</span> <span class="nav-text">19、transition闪屏</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#20、圆角bug"><span class="nav-number">20.</span> <span class="nav-text">20、圆角bug</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#21、顶部状态栏背景色"><span class="nav-number">21.</span> <span class="nav-text">21、顶部状态栏背景色</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#22、设置缓存"><span class="nav-number">22.</span> <span class="nav-text">22、设置缓存</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#23、桌面图标"><span class="nav-number">23.</span> <span class="nav-text">23、桌面图标</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#24、启动画面"><span class="nav-number">24.</span> <span class="nav-text">24、启动画面</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#25、浏览器私有及其它meta"><span class="nav-number">25.</span> <span class="nav-text">25、浏览器私有及其它meta</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好"><span class="nav-number">26.</span> <span class="nav-text">26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#27、h5网站input-设置为type-number的问题"><span class="nav-number">27.</span> <span class="nav-text">27、h5网站input 设置为type=number的问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#28、ios-设置input-按钮样式会被默认样式覆盖"><span class="nav-number">28.</span> <span class="nav-text">28、ios 设置input 按钮样式会被默认样式覆盖</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#29、IOS键盘字母输入，默认首字母大写"><span class="nav-number">29.</span> <span class="nav-text">29、IOS键盘字母输入，默认首字母大写</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#30、select-下拉选择设置右对齐"><span class="nav-number">30.</span> <span class="nav-text">30、select 下拉选择设置右对齐</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"><span class="nav-number">31.</span> <span class="nav-text">31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#32、移动端点击300ms延迟"><span class="nav-number">32.</span> <span class="nav-text">32、移动端点击300ms延迟</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#33、移动端点透问题"><span class="nav-number">33.</span> <span class="nav-text">33、移动端点透问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#34、消除-IE10-里面的那个叉号"><span class="nav-number">34.</span> <span class="nav-text">34、消除 IE10 里面的那个叉号</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等"><span class="nav-number">35.</span> <span class="nav-text">35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"><span class="nav-number">36.</span> <span class="nav-text">36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#37、移动端-HTML5-audio-autoplay-失效问题"><span class="nav-number">37.</span> <span class="nav-text">37、移动端 HTML5 audio autoplay 失效问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#38、移动端-HTML5-input-date-不支持-placeholder-问题"><span class="nav-number">38.</span> <span class="nav-text">38、移动端 HTML5 input date 不支持 placeholder 问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#39、部分机型存在type为search的input，自带close按钮样式修改方法"><span class="nav-number">39.</span> <span class="nav-text">39、部分机型存在type为search的input，自带close按钮样式修改方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#40、唤起select的option展开"><span class="nav-number">40.</span> <span class="nav-text">40、唤起select的option展开</span></a></li></ol></div>
</div>
</section>
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright" >
© 2017 -
<span itemprop="copyrightYear">2018</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">荣嬷嬷</span>
</div>
<div class="powered-by">
Powered by <a class="theme-link" href="http://hexo.io">Hexo</a>
</div>
<div class="theme-info">
Theme -
<a class="theme-link" href="https://github.com/SimonZhangITer/hexo-theme-NextZ">
NextZ
</a>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/affix.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script>
<!-- UY BEGIN -->
<!-- UY END -->
<script type="text/javascript">
// Popup Window;
var isfetched = false;
// Search DB path;
var search_path = "search.json";
if (search_path.length == 0) {
search_path = "search.xml";
}
var path = "/" + search_path;
// monitor main search box;
function proceedsearch() {
$("body").append('<div class="popoverlay">').css('overflow', 'hidden');
$('.popup').fadeToggle();
}
// search function;
var searchFunc = function(path, search_id, content_id) {
'use strict';
$.ajax({
url: path,
dataType: "xml",
async: true,
success: function( xmlResponse ) {
// get the contents from search data
isfetched = true;
$('.popup').detach().appendTo('.header-inner');
var datas = $( "entry", xmlResponse ).map(function() {
return {
title: $( "title", this ).text(),
content: $("content",this).text(),
url: $( "url" , this).text()
};
}).get();
var $input = document.getElementById(search_id);
var $resultContent = document.getElementById(content_id);
$input.addEventListener('input', function(){
var matchcounts = 0;
var str='<ul class=\"search-result-list\">';
var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
$resultContent.innerHTML = "";
if (this.value.trim().length > 1) {
// perform local searching
datas.forEach(function(data) {
var isMatch = true;
var content_index = [];
var data_title = data.title.trim().toLowerCase();
var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
var data_url = data.url;
var index_title = -1;
var index_content = -1;
var first_occur = -1;
// only match artiles with not empty titles and contents
if(data_title != '' && data_content != '') {
keywords.forEach(function(keyword, i) {
index_title = data_title.indexOf(keyword);
index_content = data_content.indexOf(keyword);
if( index_title < 0 && index_content < 0 ){
isMatch = false;
} else {
if (index_content < 0) {
index_content = 0;
}
if (i == 0) {
first_occur = index_content;
}
}
});
}
// show search results
if (isMatch) {
matchcounts += 1;
str += "<li><a href='"+ decodeURIComponent(data_url) +"' class='search-result-title'>"+ data_title +"</a>";
var content = data.content.trim().replace(/<[^>]+>/g,"");
if (first_occur >= 0) {
// cut out 100 characters
var start = first_occur - 20;
var end = first_occur + 80;
if(start < 0){
start = 0;
}
if(start == 0){
end = 50;
}
if(end > content.length){
end = content.length;
}
var match_content = content.substring(start, end);
// highlight all keywords
keywords.forEach(function(keyword){
var regS = new RegExp(keyword, "gi");
match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
});
str += "<p class=\"search-result\">" + match_content +"...</p>"
}
str += "</li>";
}
})};
str += "</ul>";
if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
$resultContent.innerHTML = str;
});
proceedsearch();
}
});}
// handle and trigger popup window;
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if (isfetched == false) {
searchFunc(path, 'local-search-input', 'local-search-result');
} else {
proceedsearch();
};
});
$('.popup-btn-close').click(function(e){
$('.popup').fadeOut(function() {
$(".popoverlay").remove();
$('body').css('overflow', '');
});