-
Notifications
You must be signed in to change notification settings - Fork 1
/
[webapp]探讨h5横竖屏的最佳实现方案.html
367 lines (367 loc) · 77.8 KB
/
[webapp]探讨h5横竖屏的最佳实现方案.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>探讨h5横竖屏的最佳实现方案 | JyLie</title>
<meta name="generator" content="VuePress 1.5.0">
<link rel="icon" href="/idea-domain/favicon.ico">
<meta name="description" content="Code my dream!">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="preload" href="/idea-domain/assets/css/0.styles.2c36a006.css" as="style"><link rel="preload" href="/idea-domain/assets/js/app.89376c8e.js" as="script"><link rel="preload" href="/idea-domain/assets/js/4.5465c98c.js" as="script"><link rel="preload" href="/idea-domain/assets/js/1.4d4f02de.js" as="script"><link rel="preload" href="/idea-domain/assets/js/79.9b118866.js" as="script"><link rel="prefetch" href="/idea-domain/assets/js/10.a2352b9f.js"><link rel="prefetch" href="/idea-domain/assets/js/11.c25da6a4.js"><link rel="prefetch" href="/idea-domain/assets/js/12.4b9a78a0.js"><link rel="prefetch" href="/idea-domain/assets/js/13.4baadb5a.js"><link rel="prefetch" href="/idea-domain/assets/js/14.185a9a02.js"><link rel="prefetch" href="/idea-domain/assets/js/15.9636a8ca.js"><link rel="prefetch" href="/idea-domain/assets/js/16.679932b8.js"><link rel="prefetch" href="/idea-domain/assets/js/17.dd32ab06.js"><link rel="prefetch" href="/idea-domain/assets/js/18.32b1cf56.js"><link rel="prefetch" href="/idea-domain/assets/js/19.a56920af.js"><link rel="prefetch" href="/idea-domain/assets/js/20.438036b2.js"><link rel="prefetch" href="/idea-domain/assets/js/21.16413d4b.js"><link rel="prefetch" href="/idea-domain/assets/js/22.0e53dc4f.js"><link rel="prefetch" href="/idea-domain/assets/js/23.1fbc2526.js"><link rel="prefetch" href="/idea-domain/assets/js/24.84de9b18.js"><link rel="prefetch" href="/idea-domain/assets/js/25.d8f5fb42.js"><link rel="prefetch" href="/idea-domain/assets/js/26.08b284c3.js"><link rel="prefetch" href="/idea-domain/assets/js/27.fc88097b.js"><link rel="prefetch" href="/idea-domain/assets/js/28.0e86cd67.js"><link rel="prefetch" href="/idea-domain/assets/js/29.14a3a251.js"><link rel="prefetch" href="/idea-domain/assets/js/30.380fd044.js"><link rel="prefetch" href="/idea-domain/assets/js/31.2159b398.js"><link rel="prefetch" href="/idea-domain/assets/js/32.9fd1bac0.js"><link rel="prefetch" href="/idea-domain/assets/js/33.66deed1e.js"><link rel="prefetch" href="/idea-domain/assets/js/34.660bbe89.js"><link rel="prefetch" href="/idea-domain/assets/js/35.d6613fc9.js"><link rel="prefetch" href="/idea-domain/assets/js/36.5debaab7.js"><link rel="prefetch" href="/idea-domain/assets/js/37.baea05f8.js"><link rel="prefetch" href="/idea-domain/assets/js/38.b12b93d9.js"><link rel="prefetch" href="/idea-domain/assets/js/39.881b30e0.js"><link rel="prefetch" href="/idea-domain/assets/js/40.c5906ef8.js"><link rel="prefetch" href="/idea-domain/assets/js/41.314b3f1d.js"><link rel="prefetch" href="/idea-domain/assets/js/42.b3e6177b.js"><link rel="prefetch" href="/idea-domain/assets/js/43.05e57135.js"><link rel="prefetch" href="/idea-domain/assets/js/44.decce320.js"><link rel="prefetch" href="/idea-domain/assets/js/45.92f9fb7a.js"><link rel="prefetch" href="/idea-domain/assets/js/46.d9fd684f.js"><link rel="prefetch" href="/idea-domain/assets/js/47.46b7b146.js"><link rel="prefetch" href="/idea-domain/assets/js/48.4ac11cbd.js"><link rel="prefetch" href="/idea-domain/assets/js/49.73378ba2.js"><link rel="prefetch" href="/idea-domain/assets/js/5.0b75201a.js"><link rel="prefetch" href="/idea-domain/assets/js/50.1a6b9738.js"><link rel="prefetch" href="/idea-domain/assets/js/51.70dbe9ec.js"><link rel="prefetch" href="/idea-domain/assets/js/52.1743641c.js"><link rel="prefetch" href="/idea-domain/assets/js/53.88c57e85.js"><link rel="prefetch" href="/idea-domain/assets/js/54.8df6ccd2.js"><link rel="prefetch" href="/idea-domain/assets/js/55.7958b607.js"><link rel="prefetch" href="/idea-domain/assets/js/56.cfd57e97.js"><link rel="prefetch" href="/idea-domain/assets/js/57.156cd233.js"><link rel="prefetch" href="/idea-domain/assets/js/58.197d2a8c.js"><link rel="prefetch" href="/idea-domain/assets/js/59.d7a72db1.js"><link rel="prefetch" href="/idea-domain/assets/js/6.1d6b63a7.js"><link rel="prefetch" href="/idea-domain/assets/js/60.c62a4d78.js"><link rel="prefetch" href="/idea-domain/assets/js/61.949370dd.js"><link rel="prefetch" href="/idea-domain/assets/js/62.23a941cc.js"><link rel="prefetch" href="/idea-domain/assets/js/63.65d4a7fe.js"><link rel="prefetch" href="/idea-domain/assets/js/64.7ac5ce1f.js"><link rel="prefetch" href="/idea-domain/assets/js/65.06b31195.js"><link rel="prefetch" href="/idea-domain/assets/js/66.0502d679.js"><link rel="prefetch" href="/idea-domain/assets/js/67.8933a0d7.js"><link rel="prefetch" href="/idea-domain/assets/js/68.b5952168.js"><link rel="prefetch" href="/idea-domain/assets/js/69.5e2c7b6f.js"><link rel="prefetch" href="/idea-domain/assets/js/7.915bfa51.js"><link rel="prefetch" href="/idea-domain/assets/js/70.b1e5fa24.js"><link rel="prefetch" href="/idea-domain/assets/js/71.1f97cb34.js"><link rel="prefetch" href="/idea-domain/assets/js/72.de33eb9f.js"><link rel="prefetch" href="/idea-domain/assets/js/73.b6026198.js"><link rel="prefetch" href="/idea-domain/assets/js/74.36040e8e.js"><link rel="prefetch" href="/idea-domain/assets/js/75.b1ee04bd.js"><link rel="prefetch" href="/idea-domain/assets/js/76.674f3bcb.js"><link rel="prefetch" href="/idea-domain/assets/js/77.2e8d78eb.js"><link rel="prefetch" href="/idea-domain/assets/js/78.6be64fef.js"><link rel="prefetch" href="/idea-domain/assets/js/8.189eb478.js"><link rel="prefetch" href="/idea-domain/assets/js/80.85bb9d6a.js"><link rel="prefetch" href="/idea-domain/assets/js/81.0dab5b76.js"><link rel="prefetch" href="/idea-domain/assets/js/82.428c38c7.js"><link rel="prefetch" href="/idea-domain/assets/js/83.d4455b9e.js"><link rel="prefetch" href="/idea-domain/assets/js/84.02a939e7.js"><link rel="prefetch" href="/idea-domain/assets/js/85.ed694f58.js"><link rel="prefetch" href="/idea-domain/assets/js/86.eeda91b2.js"><link rel="prefetch" href="/idea-domain/assets/js/87.afb850a1.js"><link rel="prefetch" href="/idea-domain/assets/js/9.db2c446c.js"><link rel="prefetch" href="/idea-domain/assets/js/vendors~flowchart.567eafbc.js">
<link rel="stylesheet" href="/idea-domain/assets/css/0.styles.2c36a006.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container" data-v-5f3f4765><div data-v-5f3f4765><div id="loader-wrapper" class="loading-wrapper" data-v-164600bd data-v-5f3f4765 data-v-5f3f4765><div class="loader-main" data-v-164600bd><div data-v-164600bd></div><div data-v-164600bd></div><div data-v-164600bd></div><div data-v-164600bd></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-7c5ab02c data-v-5f3f4765 data-v-5f3f4765><h3 class="title" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c>JyLie</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><input type="password" value="" data-v-7c5ab02c> <span data-v-7c5ab02c>Konck! Knock!</span> <button data-v-7c5ab02c>OK</button></label> <div class="footer" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><span data-v-7c5ab02c><i class="iconfont reco-theme" data-v-7c5ab02c></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-7c5ab02c>vuePress-theme-reco</a></span> <span data-v-7c5ab02c><i class="iconfont reco-copyright" data-v-7c5ab02c></i> <a data-v-7c5ab02c><span data-v-7c5ab02c>JyLie</span>
<span data-v-7c5ab02c>2017 - </span>
2023
</a></span></div></div> <div class="hide" data-v-5f3f4765><header class="navbar" data-v-5f3f4765><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/idea-domain/" class="home-link router-link-active"><!----> <span class="site-name">JyLie</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/idea-domain/" class="nav-link"><i class="iconfont reco-home"></i>
主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
分类
</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/idea-domain/categories/API/" class="nav-link"><i class="iconfont undefined"></i>
API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
HTML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
css
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
vue
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Linux/" class="nav-link"><i class="iconfont undefined"></i>
Linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Docker/" class="nav-link"><i class="iconfont undefined"></i>
Docker
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Webpack/" class="nav-link"><i class="iconfont undefined"></i>
Webpack
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebGL/" class="nav-link"><i class="iconfont undefined"></i>
WebGL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/PixiJS/" class="nav-link"><i class="iconfont undefined"></i>
PixiJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
Github
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/BOM/" class="nav-link"><i class="iconfont undefined"></i>
BOM
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/XML/" class="nav-link"><i class="iconfont undefined"></i>
XML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bug/" class="nav-link"><i class="iconfont undefined"></i>
bug
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ie/" class="nav-link"><i class="iconfont undefined"></i>
ie
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/uniapp/" class="nav-link"><i class="iconfont undefined"></i>
uniapp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IE/" class="nav-link"><i class="iconfont undefined"></i>
IE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/mysql/" class="nav-link"><i class="iconfont undefined"></i>
mysql
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/font/" class="nav-link"><i class="iconfont undefined"></i>
font
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bom/" class="nav-link"><i class="iconfont undefined"></i>
bom
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/canvas/" class="nav-link"><i class="iconfont undefined"></i>
canvas
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/video/" class="nav-link"><i class="iconfont undefined"></i>
video
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/html/" class="nav-link"><i class="iconfont undefined"></i>
html
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/js/" class="nav-link"><i class="iconfont undefined"></i>
js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/运算符/" class="nav-link"><i class="iconfont undefined"></i>
运算符
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/RegExp/" class="nav-link"><i class="iconfont undefined"></i>
RegExp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/编码/" class="nav-link"><i class="iconfont undefined"></i>
编码
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/MiniApp/" class="nav-link"><i class="iconfont undefined"></i>
MiniApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nginx/" class="nav-link"><i class="iconfont undefined"></i>
nginx
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Tool/" class="nav-link"><i class="iconfont undefined"></i>
Tool
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/node.js/" class="nav-link"><i class="iconfont undefined"></i>
node.js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/cat/" class="nav-link"><i class="iconfont undefined"></i>
cat
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nodejs/" class="nav-link"><i class="iconfont undefined"></i>
nodejs
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/protocol/" class="nav-link"><i class="iconfont undefined"></i>
protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/URL/" class="nav-link"><i class="iconfont undefined"></i>
URL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/FLOW/" class="nav-link"><i class="iconfont undefined"></i>
FLOW
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/DNS/" class="nav-link"><i class="iconfont undefined"></i>
DNS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Protocol/" class="nav-link"><i class="iconfont undefined"></i>
Protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/python/" class="nav-link"><i class="iconfont undefined"></i>
python
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/安全/" class="nav-link"><i class="iconfont undefined"></i>
安全
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/linux/" class="nav-link"><i class="iconfont undefined"></i>
linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/shell/" class="nav-link"><i class="iconfont undefined"></i>
shell
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IDE/" class="nav-link"><i class="iconfont undefined"></i>
IDE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Packer/" class="nav-link"><i class="iconfont undefined"></i>
Packer
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ViteJS/" class="nav-link"><i class="iconfont undefined"></i>
ViteJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/git/" class="nav-link"><i class="iconfont undefined"></i>
git
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vendor/" class="nav-link"><i class="iconfont undefined"></i>
vendor
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebApp/" class="nav-link"><i class="iconfont undefined"></i>
WebApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebView/" class="nav-link"><i class="iconfont undefined"></i>
WebView
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Window API/" class="nav-link"><i class="iconfont undefined"></i>
Window API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/webview/" class="nav-link"><i class="iconfont undefined"></i>
webview
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/规范/" class="nav-link"><i class="iconfont undefined"></i>
规范
</a></li></ul></div></div><div class="nav-item"><a href="/idea-domain/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
标签
</a></div><div class="nav-item"><a href="/idea-domain/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
时光轴
</a></div><div class="nav-item"><a href="https://github.com/liejiayong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-5f3f4765></div> <aside class="sidebar" data-v-5f3f4765><div class="personal-info-wrapper" data-v-a30e08ee><img src="/idea-domain/avatar.jpg" alt="author-avatar" class="personal-img" data-v-a30e08ee> <h3 class="name" data-v-a30e08ee>
JyLie
</h3> <div class="num" data-v-a30e08ee><div data-v-a30e08ee><h3 data-v-a30e08ee>74</h3> <h6 data-v-a30e08ee>Article</h6></div> <div data-v-a30e08ee><h3 data-v-a30e08ee>79</h3> <h6 data-v-a30e08ee>Tag</h6></div></div> <hr data-v-a30e08ee></div> <nav class="nav-links"><div class="nav-item"><a href="/idea-domain/" class="nav-link"><i class="iconfont reco-home"></i>
主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
分类
</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/idea-domain/categories/API/" class="nav-link"><i class="iconfont undefined"></i>
API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
HTML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
css
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
vue
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Linux/" class="nav-link"><i class="iconfont undefined"></i>
Linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Docker/" class="nav-link"><i class="iconfont undefined"></i>
Docker
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Webpack/" class="nav-link"><i class="iconfont undefined"></i>
Webpack
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebGL/" class="nav-link"><i class="iconfont undefined"></i>
WebGL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/PixiJS/" class="nav-link"><i class="iconfont undefined"></i>
PixiJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
Github
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/BOM/" class="nav-link"><i class="iconfont undefined"></i>
BOM
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/XML/" class="nav-link"><i class="iconfont undefined"></i>
XML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bug/" class="nav-link"><i class="iconfont undefined"></i>
bug
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ie/" class="nav-link"><i class="iconfont undefined"></i>
ie
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/uniapp/" class="nav-link"><i class="iconfont undefined"></i>
uniapp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IE/" class="nav-link"><i class="iconfont undefined"></i>
IE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/mysql/" class="nav-link"><i class="iconfont undefined"></i>
mysql
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/font/" class="nav-link"><i class="iconfont undefined"></i>
font
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bom/" class="nav-link"><i class="iconfont undefined"></i>
bom
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/canvas/" class="nav-link"><i class="iconfont undefined"></i>
canvas
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/video/" class="nav-link"><i class="iconfont undefined"></i>
video
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/html/" class="nav-link"><i class="iconfont undefined"></i>
html
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/js/" class="nav-link"><i class="iconfont undefined"></i>
js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/运算符/" class="nav-link"><i class="iconfont undefined"></i>
运算符
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/RegExp/" class="nav-link"><i class="iconfont undefined"></i>
RegExp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/编码/" class="nav-link"><i class="iconfont undefined"></i>
编码
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/MiniApp/" class="nav-link"><i class="iconfont undefined"></i>
MiniApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nginx/" class="nav-link"><i class="iconfont undefined"></i>
nginx
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Tool/" class="nav-link"><i class="iconfont undefined"></i>
Tool
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/node.js/" class="nav-link"><i class="iconfont undefined"></i>
node.js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/cat/" class="nav-link"><i class="iconfont undefined"></i>
cat
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nodejs/" class="nav-link"><i class="iconfont undefined"></i>
nodejs
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/protocol/" class="nav-link"><i class="iconfont undefined"></i>
protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/URL/" class="nav-link"><i class="iconfont undefined"></i>
URL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/FLOW/" class="nav-link"><i class="iconfont undefined"></i>
FLOW
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/DNS/" class="nav-link"><i class="iconfont undefined"></i>
DNS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Protocol/" class="nav-link"><i class="iconfont undefined"></i>
Protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/python/" class="nav-link"><i class="iconfont undefined"></i>
python
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/安全/" class="nav-link"><i class="iconfont undefined"></i>
安全
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/linux/" class="nav-link"><i class="iconfont undefined"></i>
linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/shell/" class="nav-link"><i class="iconfont undefined"></i>
shell
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IDE/" class="nav-link"><i class="iconfont undefined"></i>
IDE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Packer/" class="nav-link"><i class="iconfont undefined"></i>
Packer
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ViteJS/" class="nav-link"><i class="iconfont undefined"></i>
ViteJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/git/" class="nav-link"><i class="iconfont undefined"></i>
git
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vendor/" class="nav-link"><i class="iconfont undefined"></i>
vendor
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebApp/" class="nav-link"><i class="iconfont undefined"></i>
WebApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebView/" class="nav-link"><i class="iconfont undefined"></i>
WebView
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Window API/" class="nav-link"><i class="iconfont undefined"></i>
Window API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/webview/" class="nav-link"><i class="iconfont undefined"></i>
webview
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/规范/" class="nav-link"><i class="iconfont undefined"></i>
规范
</a></li></ul></div></div><div class="nav-item"><a href="/idea-domain/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
标签
</a></div><div class="nav-item"><a href="/idea-domain/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
时光轴
</a></div><div class="nav-item"><a href="https://github.com/liejiayong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>探讨h5横竖屏的最佳实现方案</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#css-media-queries" class="sidebar-link">CSS Media Queries</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#window-matchmedia" class="sidebar-link">window.matchMedia()</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#window-innerheight-window-innerwidth" class="sidebar-link">window.innerHeight/window.innerWidth</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#window-orientation" class="sidebar-link">window.orientation</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#影响判断的因素" class="sidebar-link">影响判断的因素</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#window-orientation-属性值的不一致" class="sidebar-link">window.orientation 属性值的不一致</a></li><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#软键盘的弹出" class="sidebar-link">软键盘的弹出</a></li><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#在-华为-p9-的微信（6-5-4）、华为荣耀的微信（6-5-7）和-chrome-浏览器上，screen-width-与-screen-height-均会随着横竖屏的切换而变。" class="sidebar-link">在 华为 P9 的微信（6.5.4）、华为荣耀的微信（6.5.7）和 Chrome 浏览器上，screen.width 与 screen.height 均会随着横竖屏的切换而变。</a></li><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#meta-viewport-的设置会影响到-document-documentelement-clientwidth-clientheight-的值。" class="sidebar-link">Meta Viewport 的设置会影响到 document.documentElement.clientWidth/clientHeight 的值。</a></li><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#在微信内（其他移动浏览器也会），会多次触发-resize-事件。" class="sidebar-link">在微信内（其他移动浏览器也会），会多次触发 resize 事件。</a></li></ul></li><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#探讨最佳实现方式" class="sidebar-link">探讨最佳实现方式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bwebapp%5D%E6%8E%A2%E8%AE%A8h5%E6%A8%AA%E7%AB%96%E5%B1%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88.html#参考文档" class="sidebar-link">参考文档</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-7c5ab02c data-v-5f3f4765><h3 class="title" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c>探讨h5横竖屏的最佳实现方案</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><input type="password" value="" data-v-7c5ab02c> <span data-v-7c5ab02c>Konck! Knock!</span> <button data-v-7c5ab02c>OK</button></label> <div class="footer" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><span data-v-7c5ab02c><i class="iconfont reco-theme" data-v-7c5ab02c></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-7c5ab02c>vuePress-theme-reco</a></span> <span data-v-7c5ab02c><i class="iconfont reco-copyright" data-v-7c5ab02c></i> <a data-v-7c5ab02c><span data-v-7c5ab02c>JyLie</span>
<span data-v-7c5ab02c>2017 - </span>
2023
</a></span></div></div> <div data-v-5f3f4765><main class="page"><div class="page-title" style="display:none;"><h1>探讨h5横竖屏的最佳实现方案</h1> <hr> <div data-v-2c863f0e><i class="iconfont reco-account" data-v-2c863f0e><span data-v-2c863f0e>JyLie</span></i> <i class="iconfont reco-date" data-v-2c863f0e><span data-v-2c863f0e>2020-04-15</span></i> <!----> <i class="iconfont reco-tag tags" data-v-2c863f0e><span class="tag-item" data-v-2c863f0e>WebApp</span><span class="tag-item" data-v-2c863f0e>适配</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><p>在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。</p> <p>判断横竖屏的实现方法多种多样，现在就来探讨下目前有哪些实现方法以及其中的优缺点。</p> <blockquote><p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation" target="_blank" rel="noopener noreferrer">orientation CSS media<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> feature can be used to test the orientation of the viewport (or the page box, for paged media).The orientation feature is specified as a keyword value chosen from the list below.</p></blockquote> <ul><li>portrait——The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.</li> <li>landscape——The viewport is in a landscape orientation, i.e., the width is greater than the height.</li></ul> <h2 id="css-media-queries"><a href="#css-media-queries" class="header-anchor">#</a> CSS Media Queries</h2> <p>通过媒体查询的方式，我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式：</p> <ul><li>内联样式</li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> portrait<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
//竖屏
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
//横屏
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>外联样式</li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><!-- 竖屏 -->
<link rel=<span class="token string">"stylesheet"</span> media=<span class="token string">"all and (orientation:portrait)"</span> href=<span class="token string">""</span> />
<!-- 横屏 -->
<link rel=<span class="token string">"stylesheet"</span> media=<span class="token string">"all and (orientation:landscape)"</span> href=<span class="token string">""</span> />
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="window-matchmedia"><a href="#window-matchmedia" class="header-anchor">#</a> window.matchMedia()</h2> <p>除此之外，<a href="https://www.w3.org/TR/cssom-view/#dom-window-matchmedia" target="_blank" rel="noopener noreferrer">CSS Object Model（CSSOM）Views<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 规范增加了对 JavaScript 操作 CSS Media Queries 的原生支持，它在 window 对象下增加了 matchMedia() 方法，让我们能够通过脚本的方式来实现媒体查询。</p> <p>window.matchMedia() 方法接受一个 Media Queries 语句的字符串作为参数，返回一个 MediaQueryList 对象。该对象有 media 和 matches 两个属性：</p> <ul><li>media：返回所查询的 Media Queries 语句字符串</li> <li>matches：返回一个布尔值，表示当前环境是否匹配查询语句
同时，它还包含了两个方法，用来监听事件：</li> <li>addListener(callback)：绑定回调 callback 函数</li> <li>removeListener(callback)：注销回调 callback 函数
兼容性方面<a href="http://caniuse.com/#search=matchmedia" target="_blank" rel="noopener noreferrer">Can I Use - matchMeida<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，该 API 在移动端得到良好的支持，并无兼容性问题,pc 端支持 ie10+及现代浏览器。
那么，通过 window.matchMedia() 的方法，我们可以这样判断横竖屏：</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mql <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(orientation: portrait)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onMatchMeidaChange</span><span class="token punctuation">(</span><span class="token parameter">mql</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>mql<span class="token punctuation">.</span>matches<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 竖屏</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 横屏</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">onMatchMeidaChange</span><span class="token punctuation">(</span>mql<span class="token punctuation">)</span><span class="token punctuation">;</span>
mql<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span>onMatchMeidaChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="window-innerheight-window-innerwidth"><a href="#window-innerheight-window-innerwidth" class="header-anchor">#</a> window.innerHeight/window.innerWidth</h2> <p>在 CSS Media Queries 中，Orientation 属性有两个值：</p> <ul><li><p>portrait，指的是当 height 大于等于 width 的情况</p></li> <li><p>landscape，指的是当 height 小于 width 的情况</p> <p>所以，还有一种最为常见的方法是通过比较页面的宽高，当页面的高大于等于宽时则认为是竖屏，反之则为横屏。</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">detectOrient</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight <span class="token operator">>=</span> window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 竖屏</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 横屏</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">detectOrient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> detectOrient<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="window-orientation"><a href="#window-orientation" class="header-anchor">#</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation#Browser_compatibility" target="_blank" rel="noopener noreferrer">window.orientation<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h2> <blockquote><p>不推荐使用，因为该 API 已经在 web 标准中移除，有些浏览器可能任然支持
在 iOS 平台以及大部分 Android 手机都有支持 window.orientation 这个属性，它返回一个与默认屏幕方向偏离的角度值：
0：代表此时是默认屏幕方向
90：代表顺时针偏离默认屏幕方向 90 度
-90：代表逆时针偏离默认屏幕方向 90 度
180：代表偏离默认屏幕方向 180 度
在 iOS 的开发者文档<a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html" target="_blank" rel="noopener noreferrer">（iOS Developer Library - Handling Orientation Events）<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>是这样明确定义的：</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">switch</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token number">0</span><span class="token operator">:</span>
displayStr <span class="token operator">+=</span> <span class="token string">'Portrait'</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token operator">-</span><span class="token number">90</span><span class="token operator">:</span>
displayStr <span class="token operator">+=</span> <span class="token string">'Landscape (right, screen turned clockwise)'</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token number">90</span><span class="token operator">:</span>
displayStr <span class="token operator">+=</span> <span class="token string">'Landscape (left, screen turned counterclockwise)'</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token number">180</span><span class="token operator">:</span>
displayStr <span class="token operator">+=</span> <span class="token string">'Portrait (upside-down portrait)'</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>在实际应用中，对于 iPhone 和大部分 Android 是没有 180 度的手机竖屏翻转的情况的，但是 iPad 是存在的。所以，简化下代码，我们可以绑定 orientationchange 事件来判断横竖屏：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">detectOrient</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">90</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 横屏</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 竖屏</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">detectOrient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'orientationchange'</span><span class="token punctuation">,</span> detectOrient<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="data:image/png;base64,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" alt="示例"></p> <h2 id="影响判断的因素"><a href="#影响判断的因素" class="header-anchor">#</a> 影响判断的因素</h2> <h3 id="window-orientation-属性值的不一致"><a href="#window-orientation-属性值的不一致" class="header-anchor">#</a> window.orientation 属性值的不一致</h3> <p>在 iOS 平台，对 window.orientation 属性值是无异议的，规范当中有明确规定每个值对应的情况。但是对于 Android 平台（如： Samsung Tab 2），就有不一致的特殊情况出现。</p> <p>按照<a href="https://compat.spec.whatwg.org/#event-orientationchange" target="_blank" rel="noopener noreferrer">Compatibility Standard - 4.2 window.orientation API<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>规范中的定义，0 值指的是 natural 、 default 的屏幕方向，所以如果生厂商对 natural 、 default 状态是用户应当手持设备方向为横屏，那么 0 值对应为 landscape 的横屏方向了。</p> <p>针对这种不一致情况的出现，对于追求完美的开发者来说，通过 window.orientation 的方法来判断横竖屏则变得有点不可靠的。</p> <p>而且在最新标准中 window.orientation 以被移除，真心不推荐使用。</p> <h3 id="软键盘的弹出"><a href="#软键盘的弹出" class="header-anchor">#</a> 软键盘的弹出</h3> <p>是否除了 window.orientation 的其它方法都是可靠的呢？</p> <p>然而，实际上是事与愿违的。在 Android 下，如果页面中出现软键盘弹出的情况（存在有 Input 的元素）时，页面有时会因为软键盘的弹出而导致页面回缩，即页面的宽度（竖屏时）或者高度（横屏时）被改变。</p> <p>无论是 CSS Media Queries 还是 window.matchMedia() 方法，还是根据 window.innerWidth 、window.innerHeight 的页面宽高比对方法来实现的横竖屏判断方法，都会因此受到影响，出现判断失误的情况（ Samsung SCH-i699 机型，在竖屏时由于软键盘弹出导致页面高度小于宽度，被错误地判定为横屏）。</p> <p>所以，在这样的情况下，这几种方式也变得不可靠。</p> <p>但是可以设置一个定时器来延迟获取尺寸。</p> <h3 id="在-华为-p9-的微信（6-5-4）、华为荣耀的微信（6-5-7）和-chrome-浏览器上，screen-width-与-screen-height-均会随着横竖屏的切换而变。"><a href="#在-华为-p9-的微信（6-5-4）、华为荣耀的微信（6-5-7）和-chrome-浏览器上，screen-width-与-screen-height-均会随着横竖屏的切换而变。" class="header-anchor">#</a> 在 华为 P9 的微信（6.5.4）、华为荣耀的微信（6.5.7）和 Chrome 浏览器上，screen.width 与 screen.height 均会随着横竖屏的切换而变。</h3> <p>随着横竖屏幕的切换，screen.width 与 screen.height 在大部分机型上会维持不变，而在一些机型上如@Jc、@百思不得姐夫
提出的华为 P9 微信内置浏览器(6.5.4 版本)、Chrome 桌面端浏览器模拟器中会出现值交换的现象。</p> <p>例如，在 Chome 上 iPhone 6 模拟器中，竖屏时 screen.width 与 screen.height 等于 375px、667px，而横屏时，sreen.width 与 screen.height 等于 667px 、 375px，两者属性值出现了值交换现象。</p> <p>这个问题很容易解决，虽然出现了值交换，但是值大小还是不变的，那么我们可以先通过比较大小来判断出属性值较小的是 screen.width，而属性值较大的是 screen.height，然后再用来与 document.documentElement.clientWidth/clientHeight 进行比较，从而判断出横竖屏。</p> <h3 id="meta-viewport-的设置会影响到-document-documentelement-clientwidth-clientheight-的值。"><a href="#meta-viewport-的设置会影响到-document-documentelement-clientwidth-clientheight-的值。" class="header-anchor">#</a> Meta Viewport 的设置会影响到 document.documentElement.clientWidth/clientHeight 的值。</h3> <p>Peter-Paul Koch 的《两个 Viewport 的故事》的一文中提出的关于 Viewport 的理论被认为是业界的主流论调，它指出 Layout Viewport 的尺寸可以通过 document.documentElement.clientWidth/clientHeight 进行度量。而通过设置 Meta Viewport （也就是 viewport meta 标签）是可以改变 Layout Viewport 的尺寸。</p> <p>所以，Meta Viewport 的属性设置如何是会影响到 document.documentElement.clientWidth/clientHeight 的值，这就是一部分读者迷惑到”为什么会我测量 document.documentElement.clientWidth/clientHeight 的值与 screen.width/height 的值不相同？“的原因所在。
因此，在这里也补充一点，在笔者提出的方法中，有个忘记跟大家说明的前提——页面设置了以下属性以保证页面的适配：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这句语句的设置就保证了页面是始终适配屏幕的，在横竖屏切换的场景中 document.documentElement.clientWidth/clientHeight 必然与 screen.width/height 其中一值相等，并且这也是本文提出的横竖屏检测方法的核心。</p> <h3 id="在微信内（其他移动浏览器也会），会多次触发-resize-事件。"><a href="#在微信内（其他移动浏览器也会），会多次触发-resize-事件。" class="header-anchor">#</a> 在微信内（其他移动浏览器也会），会多次触发 resize 事件。</h3> <p>笔者是通过绑定监听 resize 事件来响应执行横竖屏检测方法的，而在实际应用中确实出现了 resize 事件触发两次的情况。</p> <p>虽然并没有影响到事件的判断结果，但是这也算个值得优化的点，而且问题也不大，我们只要通过函数去抖（ Debounce Function ) 办法来进行简单的解决就好。</p> <h2 id="探讨最佳实现方式"><a href="#探讨最佳实现方式" class="header-anchor">#</a> 探讨最佳实现方式</h2> <p>本着核心的原则——具体情况具体解决来讨论。</p> <p>如果你没有遇上以上两个问题所在，恭喜你！上面所提到的方法都可以被应用，选择你最为喜欢的方法就好。</p> <p>但是如果想要避免以上两个问题所在，有没有更好的办法呢？</p> <p>经过实际情况的研究，针对开发环境兼容的情况（ iOS 与 Android 下的微信内置浏览器与原生浏览器）来说，屏幕分辨率是不会改变的，那么我们可以尝试比对页面宽高和屏幕分辨率来判断横竖屏。</p> <p>需要注意的是，微信内置浏览器页面宽度不包括顶栏部分的，而 Android 和 iOS 的原生浏览器都是带有底栏或顶栏兼有的。</p> <p>那么，我们可以确定为：</p> <p>假如屏幕分辨率固定值为：screen.width 和 screen.height（需要注意，这里很重要的一点是：在移动端，屏幕翻转时，screen.width 和 screen.height 的值依然是不变的后面有补充修正，可以直接跳到下一个章节阅读）</p> <ul><li>若获取 当前页面的宽（document.documentElement.clientWidth），等于屏幕分辨率的宽(screen.width)，则可认定当前属于竖屏。</li> <li>若获取 当前页面的宽（document.documentElement.clientWidth），等于屏幕分辨率的高(screen.height)，则可认定当前属于横屏。
如此，对应的代码为：</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 判断横竖屏</span>
<span class="token keyword">var</span> utils <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function-variable function">debounce</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">func<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> context <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
args <span class="token operator">=</span> arguments<span class="token punctuation">;</span>
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">func</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> detectRes <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'J_detectRes'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> detectData <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'J_detectData'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">detectOrient</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> storage <span class="token operator">=</span> localStorage<span class="token punctuation">;</span> <span class="token comment">// 不一定要使用localStorage，其他存储数据的手段都可以</span>
<span class="token keyword">var</span> data <span class="token operator">=</span> storage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'J-recordOrientX'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> cw <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
<span class="token keyword">var</span> _Width <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span>
_Height <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
sw <span class="token operator">=</span> window<span class="token punctuation">.</span>screen<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
sh <span class="token operator">=</span> window<span class="token punctuation">.</span>screen<span class="token punctuation">.</span>height<span class="token punctuation">;</span>
<span class="token comment">// 2.在某些机型（如华为P9）下出现 srceen.width/height 值交换，所以进行大小值比较判断</span>
_Width <span class="token operator">=</span> sw <span class="token operator"><</span> sh <span class="token operator">?</span> sw <span class="token operator">:</span> sh<span class="token punctuation">;</span>
_Height <span class="token operator">=</span> sw <span class="token operator">>=</span> sh <span class="token operator">?</span> sw <span class="token operator">:</span> sh<span class="token punctuation">;</span>
storage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'J-recordOrientX'</span><span class="token punctuation">,</span> _Width <span class="token operator">+</span> <span class="token string">','</span> <span class="token operator">+</span> _Height<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
_Width <span class="token operator">=</span> str<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
_Height <span class="token operator">=</span> str<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>cw <span class="token operator">==</span> _Width<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 竖屏</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>cw <span class="token operator">==</span> _Height<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 横屏</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 3.函数去抖处理</span>
window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> utils<span class="token punctuation">.</span><span class="token function">debounce</span><span class="token punctuation">(</span>detectOrient<span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">detectOrient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><p>目前，W3C 引入<a href="https://www.w3.org/TR/screen-orientation/" target="_blank" rel="noopener noreferrer">Screen Orientation API<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，该标准能够帮助 Web 应用获得屏幕方向的状态，在状态改变时获得通知，并能够从应用程序中将屏幕状态锁定到特定状态。</p> <p>但截止目前，该标准仍在 W3C 草案阶段。在移动端，它在 Android 和 iOS 平台上仍未得到支持，仅仅在 Chrome for Android 39 版本及以上才得到实现，所以对目前的开发来说意义不大。只能期待它能够尽快通过并得到广泛支持，这样的检测屏幕方向的问题就能够得到规范化的解决。</p> <h2 id="参考文档"><a href="#参考文档" class="header-anchor">#</a> 参考文档</h2> <ul><li><a href="https://compat.spec.whatwg.org/#event-orientationchange" target="_blank" rel="noopener noreferrer">Compatibility Standard - 4.2 window.orientation API<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation#Browser_compatibility" target="_blank" rel="noopener noreferrer">MDN-Window.orientation<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://aotu.io/notes/2017/01/31/detect-orientation/" target="_blank" rel="noopener noreferrer">探讨判断横竖屏的最佳实现<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a936bdb4 data-v-a936bdb4><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a936bdb4><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a936bdb4></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a936bdb4></path></svg></div><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:65px;bottom:0px;width:130px;height:290px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="130" height="290" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:130px;height:290px;"></canvas></div></div></div>
<script src="/idea-domain/assets/js/app.89376c8e.js" defer></script><script src="/idea-domain/assets/js/4.5465c98c.js" defer></script><script src="/idea-domain/assets/js/1.4d4f02de.js" defer></script><script src="/idea-domain/assets/js/79.9b118866.js" defer></script>
</body>
</html>