blob: f9169a396b9b7ecaa3df0082b334b830765f366f (
plain)
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
|
---
title: Screen.lockOrientation()
slug: Web/API/Screen/lockOrientation
translation_of: Web/API/Screen/lockOrientation
---
<p>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</p>
<p><code>lockOrientation</code> 此方法会把屏幕锁定为指定的方向.</p>
<div class="note">
<p><strong>注意:</strong> 此方法仅适用于已安装的Web apps 或 <a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">全屏模式</a> 的Web 页面.</p>
</div>
<h2 id="使用方法">使用方法</h2>
<pre class="syntaxbox"><em>lockedAllowed</em> = window.screen.lockOrientation(<em>orientation</em>);</pre>
<h3 id="参数介绍">参数介绍</h3>
<dl>
<dt><em>orientation</em></dt>
<dd>需要锁定屏幕的方向。这个参数是一个字符串或者是一个由字符串组成的数组。通过多个字符串可以让屏幕只在选定的方向上进行旋转。</dd>
</dl>
<p>以下的字符串即表示你也许会指定的一些可能的方向。</p>
<dl>
<dt><code>portrait-primary</code></dt>
<dd>它表示屏幕处于主要的肖像模式时的方向。如果设备处于正常位置且该位置处于纵向位置，或设备的正常位置处于横向并且设备保持顺时针转动90°，则会在主肖像模式下考虑屏幕。正常的位置是依赖于设备的。</dd>
<dt><code>portrait-secondary</code></dt>
<dd>
<p>它表示屏幕处于辅助肖像模式时的方向。如果设备与正常位置保持180°，并且该位置处于纵向位置，或者设备的正常位置处于横向位置，并且持有的设备逆时针转动90°，则屏幕将处于辅助人像模式。正常的位置是依赖于设备的。</p>
</dd>
<dt><code>landscape-primary</code></dt>
<dd>它代表了屏幕处于主要风景模式时的方向。 如果设备保持在正常位置，并且该位置处于横向位置，或者设备的正常位置处于纵向位置，并且所保持的设备顺时针旋转90°，则会将其视为主要横向模式。正常的位置是依赖于设备的。</dd>
<dt><code>landscape-secondary</code></dt>
<dd>它代表了屏幕处于次要风景模式时的方向。如果设备与其正常位置保持180°并且该位置处于横向，或者如果设备的正常位置是纵向的，并且所保持的设备逆时针旋转90°，则将其视为次要横向模式。正常的位置是依赖于设备的。</dd>
<dt><code>portrait</code></dt>
<dd>它表示同时包含 <code>portrait-primary</code> 和 <code>portrait-secondary</code>.</dd>
<dt><code>landscape</code></dt>
<dd>它表示同时包含 <code>landscape-primary</code> 和 <code>landscape-secondary</code>.</dd>
</dl>
<dl>
<dt><code>default</code></dt>
<dd>它代表 <code>portrait-primary</code> 和 <code>landscape-primary</code> 主要取决于设备的自然方向。例如，如果面板分辨率为1280 * 800，则 <code>default</code> 为横向，如果分辨率为800 * 1280，则 <code>default</code> 为纵向。</dd>
</dl>
<div class="note">
<p><strong>注意:</strong> 可同时设置多个锁定值。因此，如果锁定设置为只有一个方向，屏幕方向将永远不会改变，直到屏幕方向解锁。否则，只要方向在设备锁定的方向之中，屏幕方向就会从一个方向改变到另一个方向。</p>
</div>
<h2 id="返回值">返回值</h2>
<p>如果方向被授权锁定，则返回 <code>true</code> ;如果方向锁定被拒绝，则返回 <code>false</code>。请注意，返回值并不表示屏幕方向确实被锁定：可能会有延迟。</p>
<h2 id="示例">示例</h2>
<h3 id="使用_DOMString_参数">使用 <code>DOMString</code> 参数</h3>
<pre class="brush: js">screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (screen.lockOrientationUniversal("landscape-primary")) {
// 方向已锁定成功
} else {
// 方向锁定失败
}
</pre>
<h3 id="使用_Array_参数">使用 <code>Array</code> 参数</h3>
<pre class="brush: js">screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (screen.lockOrientationUniversal(["landscape-primary", "landscape-secondary"])) {
// 方向已锁定成功
} else {
// 方向锁定失败
}</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Screen Orientation', '', 'Screen Orientation')}}</td>
<td>{{Spec2('Screen Orientation')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基础支持</td>
<td>{{CompatChrome(38)}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}} {{property_prefix("moz")}}<sup>[2]</sup></td>
<td>11 {{property_prefix("ms")}}<sup>[3]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>Array</code> 参数</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("18.0")}}</td>
<td>11 {{property_prefix("ms")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>default</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基础支持</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(38)}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}} {{property_prefix("moz")}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>Array</code> 参数</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("18.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>default</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("26.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 使用更新的标准语法（<code>screen.orientation.lock</code>）实现类似的方法并返回一个 <code>Promise</code> 。虽然它存在于桌面上，但总是会失败。</p>
<p>[2] 此API仅作为Firefox OS和Firefox的前缀方法（<code>screen.mozLockOrientation</code>）实现。另外，由于{{Bug(966480)}}，它不适用于Android的Firefox。</p>
<p>[3] 此方法在Internet Explorer for Windows 8.1和Windows RT 8.1中使用前缀（<code>screen.msLockOrientation</code>）实现。 它在Windows 7 上不受支持。</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{domxref("Screen.orientation")}}</li>
<li>{{domxref("Screen.unlockOrientation()")}}</li>
<li>{{domxref("Screen.onorientationchange")}}</li>
<li><a href="/en-US/docs/Managing_screen_orientation">控制屏幕方向</a></li>
</ul>
|
