initial commit

11 files changed, 602 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/screen/availheight/index.html b/files/zh-cn/web/api/screen/availheight/index.html
new file mode 100644
index 0000000000..9a09071edf
--- /dev/null
+++ b/files/zh-cn/web/api/screen/availheight/index.html
@@ -0,0 +1,18 @@
+---
+title: Screen.availHeight
+slug: Web/API/Screen/availHeight
+translation_of: Web/API/Screen/availHeight
+---
+<div>
+ {{APIRef}}</div>
+<h2 id="Summary" name="Summary">概述</h2>
+<p>返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。</p>
+<h2 id="Syntax" name="Syntax">语法</h2>
+<pre class="syntaxbox"><code>iAvail = window.screen.availHeight</code></pre>
+<h2 id="Example" name="Example">示例</h2>
+<pre class="brush:js">if (window.screen.availHeight !== window.screen.height) {
+  // something's in the way!
+  // use available to size window
+}</pre>
+<h2 id="Specification" name="Specification">规范</h2>
+<p>{{DOM0}}</p>
diff --git a/files/zh-cn/web/api/screen/availleft/index.html b/files/zh-cn/web/api/screen/availleft/index.html
new file mode 100644
index 0000000000..d5cf983be3
--- /dev/null
+++ b/files/zh-cn/web/api/screen/availleft/index.html
@@ -0,0 +1,25 @@
+---
+title: Screen.availLeft
+slug: Web/API/Screen/availLeft
+translation_of: Web/API/Screen/availLeft
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p>返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。</p>
+<h3 id="Syntax" name="Syntax">语法</h3>
+<pre class="eval">iAvail = window.screen.availLeft
+</pre>
+<h3 id="Example" name="Example">示例</h3>
+<pre class="eval">setY = window.screen.height - window.screen.availTop;
+setX = window.screen.width - window.screen.availLeft;
+window.moveTo(setX, setY);
+</pre>
+<h3 id="Notes" name="Notes">备注</h3>
+<p>大多数情况下，该属性返回 0。</p>
+<p>如果你在有两个屏幕的电脑上使用该属性，在右侧屏幕计算该属性值时，返回左侧屏幕的宽度（单位：像素），也即左侧屏幕左边界的 X 坐标。</p>
+<p>在 Windows 中，该属性值取决于哪个屏幕被设为主屏幕，返回相对于主屏幕左边界的 X 坐标。就是说，即使主屏幕不是左侧的屏幕，它的左边界的 X 坐标也是返回 0。如果副屏幕在主屏幕的左侧，则它拥有负的 X 坐标。</p>
+<p>[1] [2] - 左屏幕 <em>availLeft</em> 返回 <strong>0</strong>，右侧的屏幕返回左侧屏幕的宽度</p>
+<p>[2] [1] - 左侧屏幕 <em>availLeft</em> 返回该屏幕的 <strong>-width</strong>，右侧屏幕返回 <strong>0</strong></p>
+<h3 id="Specification" name="Specification">规范</h3>
+<p>DOM Level 0。不属于任何规范。</p>
+<p>{{ languages( { "ja": "ja/DOM/window.screen.availLeft" } ) }}</p>
diff --git a/files/zh-cn/web/api/screen/availtop/index.html b/files/zh-cn/web/api/screen/availtop/index.html
new file mode 100644
index 0000000000..bc426fde76
--- /dev/null
+++ b/files/zh-cn/web/api/screen/availtop/index.html
@@ -0,0 +1,23 @@
+---
+title: Screen.availTop
+slug: Web/API/Screen/availTop
+translation_of: Web/API/Screen/availTop
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p>浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的像素值。</p>
+<h3 id="Syntax" name="Syntax">语法</h3>
+<pre class="eval">iAvail = window.screen.availTop
+</pre>
+<h3 id="Example" name="Example">示例</h3>
+<pre class="eval">setY = window.screen.height - window.screen.availTop;
+setX = window.screen.width - window.screen.availLeft;
+window.moveTo(setX, setY);
+</pre>
+<h3 id="Notes" name="Notes">备注</h3>
+<p>大多数情况下，该属性返回 0。</p>
+<h3 id="Specification" name="Specification">规范</h3>
+<p>DOM Level 0。不属于任何规范。</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "ja": "ja/DOM/window.screen.availTop" } ) }}</p>
diff --git a/files/zh-cn/web/api/screen/availwidth/index.html b/files/zh-cn/web/api/screen/availwidth/index.html
new file mode 100644
index 0000000000..0214c05982
--- /dev/null
+++ b/files/zh-cn/web/api/screen/availwidth/index.html
@@ -0,0 +1,18 @@
+---
+title: Screen.availWidth
+slug: Web/API/Screen/availWidth
+translation_of: Web/API/Screen/availWidth
+---
+<div>
+ {{ APIRef() }}</div>
+<h2 id="Summary" name="Summary">概述</h2>
+<p>返回浏览器窗口可占用的水平宽度（单位：像素）。</p>
+<h2 id="Syntax" name="Syntax">语法</h2>
+<pre class="syntaxbox"><code>window.screen.availWidth</code></pre>
+<h2 id="Example" name="Example">示例</h2>
+<pre class="brush:js">var screenAvailWidth = window.screen.availWidth;
+
+console.log(screenAvailWidth);</pre>
+<h2 id="Specification" name="Specification">规范</h2>
+<div>
+ {{DOM0()}}</div>
diff --git a/files/zh-cn/web/api/screen/colordepth/index.html b/files/zh-cn/web/api/screen/colordepth/index.html
new file mode 100644
index 0000000000..0f80ad810b
--- /dev/null
+++ b/files/zh-cn/web/api/screen/colordepth/index.html
@@ -0,0 +1,53 @@
+---
+title: Screen.colorDepth
+slug: Web/API/Screen/colorDepth
+tags:
+  - API
+translation_of: Web/API/Screen/colorDepth
+---
+<div> </div>
+
+<div>{{APIRef("CSSOM View")}}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p>返回屏幕的颜色深度（color depth）。根据CSSOM( CSS对象模型 )视图，为兼容起见，该值总为24。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><var>bitDepth</var> = window.screen.colorDepth
+</pre>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre>// 检测屏幕的颜色深度
+if ( window.screen.colorDepth &lt; 8) {
+  // 使用低色彩版本页面
+} else {
+  // 使用常规的彩色版页面
+}
+</pre>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-screen-colordepth', 'Screen.colorDepth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Screen.pixelDepth")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/screen/height/index.html b/files/zh-cn/web/api/screen/height/index.html
new file mode 100644
index 0000000000..c71a1d06f5
--- /dev/null
+++ b/files/zh-cn/web/api/screen/height/index.html
@@ -0,0 +1,22 @@
+---
+title: Screen.height
+slug: Web/API/Screen/height
+translation_of: Web/API/Screen/height
+---
+<div>
+ {{APIRef}}</div>
+<h2 id="Summary" name="Summary">概述</h2>
+<p>返回屏幕的高度（单位：像素）。</p>
+<h2 id="Syntax" name="Syntax">语法</h2>
+<pre class="syntaxbox"><var>iHeight</var> = window.screen.height
+</pre>
+<h2 id="Example" name="Example">示例</h2>
+<pre class="brush:js">if (window.screen.availHeight !== window.screen.height) {
+   // something is occupying some screen real estate!
+}
+</pre>
+<h2 id="Notes" name="Notes">备注</h2>
+<p>注意，该属性返回的高度值并不是全部对浏览器窗口可用。小工具（Widgets），如任务栏或其他特殊的程序窗口，可能会减少浏览器窗口和其他应用程序能够利用的空间。</p>
+<p>当返回屏幕高度时，IE 会考虑缩放设置。只有当缩放比例为 100% 时，IE 才会返回真实的屏幕高度。</p>
+<h2 id="Specification" name="Specification">规范</h2>
+<p>{{dom0}}</p>
diff --git a/files/zh-cn/web/api/screen/index.html b/files/zh-cn/web/api/screen/index.html
new file mode 100644
index 0000000000..4ca30e88e0
--- /dev/null
+++ b/files/zh-cn/web/api/screen/index.html
@@ -0,0 +1,102 @@
+---
+title: Screen
+slug: Web/API/Screen
+tags:
+  - API
+  - 参考
+  - 接口
+translation_of: Web/API/Screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p><code>Screen</code> 接口表示一个屏幕窗口，往往指的是当前正在被渲染的window对象，可以使用 <code>window.screen</code> 获取它。</p>
+
+<p>请注意：由浏览器决定提供屏幕对象，此对象一般通过当前浏览器窗口活动状态动态检测来得到。</p>
+
+<h2 id="Example" name="Example">属性</h2>
+
+<dl>
+ <dt>{{domxref("Screen.availTop")}}</dt>
+ <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd>
+ <dt>{{domxref("Screen.availLeft")}}</dt>
+ <dd>返回屏幕左边边界的第一个像素点</dd>
+ <dt>{{domxref("Screen.availHeight")}}</dt>
+ <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd>
+ <dt>{{domxref("Screen.availWidth")}}</dt>
+ <dd>返回窗口中水平方向可用空间的像素值。</dd>
+ <dt>{{domxref("Screen.colorDepth")}}</dt>
+ <dd>返回屏幕的色彩深度。</dd>
+ <dt>{{domxref("Screen.height")}}</dt>
+ <dd>以像素为单位返回屏幕的高度。</dd>
+ <dt>{{domxref("Screen.left")}}</dt>
+ <dd>返回从最左边界到当前屏幕的像素值。</dd>
+ <dt>{{domxref("Screen.orientation")}}</dt>
+ <dd>返回当前屏幕的转向。</dd>
+ <dt>{{domxref("Screen.pixelDepth")}}</dt>
+ <dd>获取屏幕的像素点</dd>
+ <dt>{{domxref("Screen.top")}}</dt>
+ <dd>返回最上边界到当前屏幕的像素值。</dd>
+ <dt>{{domxref("Screen.width")}}</dt>
+ <dd>返回屏幕的宽度。</dd>
+ <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>布尔值。如果设置为false讲关闭设备的屏幕。</dd>
+ <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>控制设备屏幕的亮度。期望参数是0-1.0之间的浮点数。</dd>
+</dl>
+
+<h3 id="Events_handler">Events handler</h3>
+
+<dl>
+ <dt>{{domxref("Screen.onorientationchange")}}</dt>
+ <dd>对{{event("orientationchange")}} 事件的时间处理器。</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Screen.lockOrientation")}}</dt>
+ <dd>锁定屏幕转向(仅在全屏或者已安装的APP中生效)</dd>
+ <dt>{{domxref("Screen.unlockOrientation")}}</dt>
+ <dd>解锁屏幕转向(仅在全屏或者已安装的APP中生效)</dd>
+</dl>
+
+<p>方法继承于 {{domxref("EventTarget")}}</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // use low-color version of page
+} else {
+  // use regular, colorful page
+}
+</pre>
+
+<h2 id="Specification" name="Specification">标准文档说明</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Screen")}} </p>
diff --git a/files/zh-cn/web/api/screen/lockorientation/index.html b/files/zh-cn/web/api/screen/lockorientation/index.html
new file mode 100644
index 0000000000..f9169a396b
--- /dev/null
+++ b/files/zh-cn/web/api/screen/lockorientation/index.html
@@ -0,0 +1,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>
diff --git a/files/zh-cn/web/api/screen/orientation/index.html b/files/zh-cn/web/api/screen/orientation/index.html
new file mode 100644
index 0000000000..0a06678a03
--- /dev/null
+++ b/files/zh-cn/web/api/screen/orientation/index.html
@@ -0,0 +1,69 @@
+---
+title: Screen.orientation
+slug: Web/API/Screen/orientation
+tags:
+  - API
+  - Experimental
+  - Screen Orientation
+  - screen
+translation_of: Web/API/Screen/orientation
+---
+<p>{{APIRef("Screen Orientation API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>orientation</code></strong> 是 {{DOMxRef("Screen")}} 接口的一个只读属性，返回屏幕当前的方向。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>orientation</var> = window.screen.orientation;</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{DOMxRef("ScreenOrientation")}} 的实例，表示屏幕的方向。</p>
+
+<p>注意在更早的、有前缀的版本中会返回一个 {{DOMxRef("DOMString")}} 值，相当于 {{DOMxRef("ScreenOrientation.type")}} 的值。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js;">var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
+
+if (orientation === "landscape-primary") {
+  console.log("That looks good.");
+} else if (orientation === "landscape-secondary") {
+  console.log("Mmmh... the screen is upside down!");
+} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
+  console.log("Mmmh... you should rotate your device to landscape");
+} else if (orientation === undefined) {
+  console.log("The orientation API isn't supported in this browser :(");
+}
+</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', '#dom-screen-orientation', 'orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Screen.orientation")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{DOMxRef("ScreenOrientation")}}</li>
+ <li>{{DOMxRef("Screen.onorientationchange")}}</li>
+ <li><a href="/en-US/docs/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/screen/pixeldepth/index.html b/files/zh-cn/web/api/screen/pixeldepth/index.html
new file mode 100644
index 0000000000..c96b7e4253
--- /dev/null
+++ b/files/zh-cn/web/api/screen/pixeldepth/index.html
@@ -0,0 +1,51 @@
+---
+title: Screen.pixelDepth
+slug: Web/API/Screen/pixelDepth
+tags:
+  - API
+translation_of: Web/API/Screen/pixelDepth
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p>返回屏幕的位深度/色彩深度（bit depth）。根据CSSOM( CSS对象模型 )视图，为兼容起见，该值总为24。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">depth = window.screen.pixelDepth
+</pre>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre class="brush:js">// 如果没有足够的位深度/色彩深度（bit depth），就选择一个更纯的颜色
+if ( window.screen.pixelDepth &gt; 8 ) {
+  document.style.color = "#FAEBD7";
+} else {
+  document.style.color = "#FFFFFF";
+}
+</pre>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-screen-pixeldepth', 'Screen.pixelDepth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Screen.colorDepth")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/screen/width/index.html b/files/zh-cn/web/api/screen/width/index.html
new file mode 100644
index 0000000000..9a412ccbda
--- /dev/null
+++ b/files/zh-cn/web/api/screen/width/index.html
@@ -0,0 +1,23 @@
+---
+title: Screen.width
+slug: Web/API/Screen/width
+translation_of: Web/API/Screen/width
+---
+<div>
+ {{APIRef}}</div>
+<h2 id="Summary" name="Summary">概述</h2>
+<p>返回屏幕的宽度。</p>
+<h2 id="Syntax" name="Syntax">语法</h2>
+<pre class="syntaxbox"><var>lWidth</var> = window.screen.width
+</pre>
+<h2 id="Example" name="Example">示例</h2>
+<pre class="brush:js">// crude way to check that the screen is at 1024x768
+if (window.screen.width &gt; 1000) {
+  // resolution is below 10 x 7
+}
+</pre>
+<h2 id="Notes" name="Notes">备注</h2>
+<p>注意，该属性返回的宽度值不一定就是浏览器窗口可使用的宽度。当有其他小工具占据了屏幕空间时，浏览器有时不能占用小工具（如任务栏）占据的空间。<code>window.screen.width</code> 和 <code>window.screen.availWidth</code> 两者不同。相关属性 {{domxref("window.screen.height")}}。</p>
+<p>在返回该值时，IE 会考虑缩放设置。只有在缩放比例为 100% 时，IE 才返回真实的屏幕宽度。</p>
+<h2 id="规范">规范</h2>
+<p>{{dom0}}</p>