From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/screen/availheight/index.html | 18 ++ files/zh-cn/web/api/screen/availleft/index.html | 25 +++ files/zh-cn/web/api/screen/availtop/index.html | 23 +++ files/zh-cn/web/api/screen/availwidth/index.html | 18 ++ files/zh-cn/web/api/screen/colordepth/index.html | 53 ++++++ files/zh-cn/web/api/screen/height/index.html | 22 +++ files/zh-cn/web/api/screen/index.html | 102 +++++++++++ .../web/api/screen/lockorientation/index.html | 198 +++++++++++++++++++++ files/zh-cn/web/api/screen/orientation/index.html | 69 +++++++ files/zh-cn/web/api/screen/pixeldepth/index.html | 51 ++++++ files/zh-cn/web/api/screen/width/index.html | 23 +++ 11 files changed, 602 insertions(+) create mode 100644 files/zh-cn/web/api/screen/availheight/index.html create mode 100644 files/zh-cn/web/api/screen/availleft/index.html create mode 100644 files/zh-cn/web/api/screen/availtop/index.html create mode 100644 files/zh-cn/web/api/screen/availwidth/index.html create mode 100644 files/zh-cn/web/api/screen/colordepth/index.html create mode 100644 files/zh-cn/web/api/screen/height/index.html create mode 100644 files/zh-cn/web/api/screen/index.html create mode 100644 files/zh-cn/web/api/screen/lockorientation/index.html create mode 100644 files/zh-cn/web/api/screen/orientation/index.html create mode 100644 files/zh-cn/web/api/screen/pixeldepth/index.html create mode 100644 files/zh-cn/web/api/screen/width/index.html (limited to 'files/zh-cn/web/api/screen') 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 +--- +
+ {{APIRef}}
+

概述

+

返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。

+

语法

+
iAvail = window.screen.availHeight
+

示例

+
if (window.screen.availHeight !== window.screen.height) {
+  // something's in the way!
+  // use available to size window
+}
+

规范

+

{{DOM0}}

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 +--- +

{{ ApiRef() }}

+

概述

+

返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。

+

语法

+
iAvail = window.screen.availLeft
+
+

示例

+
setY = window.screen.height - window.screen.availTop;
+setX = window.screen.width - window.screen.availLeft;
+window.moveTo(setX, setY);
+
+

备注

+

大多数情况下，该属性返回 0。

+

如果你在有两个屏幕的电脑上使用该属性，在右侧屏幕计算该属性值时，返回左侧屏幕的宽度（单位：像素），也即左侧屏幕左边界的 X 坐标。

+

在 Windows 中，该属性值取决于哪个屏幕被设为主屏幕，返回相对于主屏幕左边界的 X 坐标。就是说，即使主屏幕不是左侧的屏幕，它的左边界的 X 坐标也是返回 0。如果副屏幕在主屏幕的左侧，则它拥有负的 X 坐标。

+

[1] [2] - 左屏幕 availLeft 返回 0，右侧的屏幕返回左侧屏幕的宽度

+

[2] [1] - 左侧屏幕 availLeft 返回该屏幕的 -width，右侧屏幕返回 0

+

规范

+

DOM Level 0。不属于任何规范。

+

{{ languages( { "ja": "ja/DOM/window.screen.availLeft" } ) }}

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 +--- +

{{ ApiRef() }}

+

概述

+

浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的像素值。

+

语法

+
iAvail = window.screen.availTop
+
+

示例

+
setY = window.screen.height - window.screen.availTop;
+setX = window.screen.width - window.screen.availLeft;
+window.moveTo(setX, setY);
+
+

备注

+

大多数情况下，该属性返回 0。

+

规范

+

DOM Level 0。不属于任何规范。

+
+  
+

{{ languages( { "ja": "ja/DOM/window.screen.availTop" } ) }}

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 +--- +
+ {{ APIRef() }}
+

概述

+

返回浏览器窗口可占用的水平宽度（单位：像素）。

+

语法

+
window.screen.availWidth
+

示例

+
var screenAvailWidth = window.screen.availWidth;
+
+console.log(screenAvailWidth);
+

规范

+
+ {{DOM0()}}
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 +--- +
 
+ +
{{APIRef("CSSOM View")}}
+ +

概述

+ +

返回屏幕的颜色深度（color depth）。根据CSSOM( CSS对象模型 )视图，为兼容起见，该值总为24。

+ +

语法

+ +
bitDepth = window.screen.colorDepth
+
+ +

示例

+ +
// 检测屏幕的颜色深度
+if ( window.screen.colorDepth < 8) {
+  // 使用低色彩版本页面
+} else {
+  // 使用常规的彩色版页面
+}
+
+ +

规范

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-screen-colordepth', 'Screen.colorDepth') }}{{ Spec2('CSSOM View') }}
+ +

相关链接

+ + 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 +--- +
+ {{APIRef}}
+

概述

+

返回屏幕的高度（单位：像素）。

+

语法

+
iHeight = window.screen.height
+
+

示例

+
if (window.screen.availHeight !== window.screen.height) {
+   // something is occupying some screen real estate!
+}
+
+

备注

+

注意，该属性返回的高度值并不是全部对浏览器窗口可用。小工具（Widgets），如任务栏或其他特殊的程序窗口，可能会减少浏览器窗口和其他应用程序能够利用的空间。

+

当返回屏幕高度时，IE 会考虑缩放设置。只有当缩放比例为 100% 时，IE 才会返回真实的屏幕高度。

+

规范

+

{{dom0}}

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 +--- +
{{APIRef("CSSOM View")}}
+ +

Screen 接口表示一个屏幕窗口，往往指的是当前正在被渲染的window对象，可以使用 window.screen 获取它。

+ +

请注意：由浏览器决定提供屏幕对象，此对象一般通过当前浏览器窗口活动状态动态检测来得到。

+ +

属性

+ +
+
{{domxref("Screen.availTop")}}
+
Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+
{{domxref("Screen.availLeft")}}
+
返回屏幕左边边界的第一个像素点
+
{{domxref("Screen.availHeight")}}
+
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.
+
{{domxref("Screen.availWidth")}}
+
返回窗口中水平方向可用空间的像素值。
+
{{domxref("Screen.colorDepth")}}
+
返回屏幕的色彩深度。
+
{{domxref("Screen.height")}}
+
以像素为单位返回屏幕的高度。
+
{{domxref("Screen.left")}}
+
返回从最左边界到当前屏幕的像素值。
+
{{domxref("Screen.orientation")}}
+
返回当前屏幕的转向。
+
{{domxref("Screen.pixelDepth")}}
+
获取屏幕的像素点
+
{{domxref("Screen.top")}}
+
返回最上边界到当前屏幕的像素值。
+
{{domxref("Screen.width")}}
+
返回屏幕的宽度。
+
{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}
+
布尔值。如果设置为false讲关闭设备的屏幕。
+
{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}
+
控制设备屏幕的亮度。期望参数是0-1.0之间的浮点数。
+
+ +

Events handler

+ +
+
{{domxref("Screen.onorientationchange")}}
+
对{{event("orientationchange")}} 事件的时间处理器。
+
 
+
+ +

方法

+ +
+
{{domxref("Screen.lockOrientation")}}
+
锁定屏幕转向(仅在全屏或者已安装的APP中生效)
+
{{domxref("Screen.unlockOrientation")}}
+
解锁屏幕转向(仅在全屏或者已安装的APP中生效)
+
+ +

方法继承于 {{domxref("EventTarget")}}

+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

示例

+ +
if (screen.pixelDepth < 8) {
+  // use low-color version of page
+} else {
+  // use regular, colorful page
+}
+
+ +

标准文档说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}{{ Spec2('CSSOM View') }} 
+ +

浏览器兼容性

+ + + +

{{Compat("api.Screen")}} 

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 +--- +

{{APIRef("CSSOM View")}}{{SeeCompatTable}}

+ +

lockOrientation 此方法会把屏幕锁定为指定的方向.

+ +
+

注意: 此方法仅适用于已安装的Web apps 或 全屏模式 的Web 页面.

+
+ +

使用方法

+ +
lockedAllowed = window.screen.lockOrientation(orientation);
+ +

参数介绍

+ +
+
orientation
+
需要锁定屏幕的方向。这个参数是一个字符串或者是一个由字符串组成的数组。通过多个字符串可以让屏幕只在选定的方向上进行旋转。
+
+ +

以下的字符串即表示你也许会指定的一些可能的方向。

+ +
+
portrait-primary
+
它表示屏幕处于主要的肖像模式时的方向。如果设备处于正常位置且该位置处于纵向位置，或设备的正常位置处于横向并且设备保持顺时针转动90°，则会在主肖像模式下考虑屏幕。正常的位置是依赖于设备的。
+
portrait-secondary
+
+

它表示屏幕处于辅助肖像模式时的方向。如果设备与正常位置保持180°，并且该位置处于纵向位置，或者设备的正常位置处于横向位置，并且持有的设备逆时针转动90°，则屏幕将处于辅助人像模式。正常的位置是依赖于设备的。

+
+
landscape-primary
+
它代表了屏幕处于主要风景模式时的方向。 如果设备保持在正常位置，并且该位置处于横向位置，或者设备的正常位置处于纵向位置，并且所保持的设备顺时针旋转90°，则会将其视为主要横向模式。正常的位置是依赖于设备的。
+
landscape-secondary
+
它代表了屏幕处于次要风景模式时的方向。如果设备与其正常位置保持180°并且该位置处于横向，或者如果设备的正常位置是纵向的，并且所保持的设备逆时针旋转90°，则将其视为次要横向模式。正常的位置是依赖于设备的。
+
portrait
+
它表示同时包含 portrait-primary 和 portrait-secondary.
+
landscape
+
它表示同时包含 landscape-primary 和 landscape-secondary.
+
+ +
+
default
+
它代表 portrait-primary 和 landscape-primary 主要取决于设备的自然方向。例如，如果面板分辨率为1280 * 800，则 default 为横向，如果分辨率为800 * 1280，则 default 为纵向。
+
+ +
+

注意: 可同时设置多个锁定值。因此，如果锁定设置为只有一个方向，屏幕方向将永远不会改变，直到屏幕方向解锁。否则，只要方向在设备锁定的方向之中，屏幕方向就会从一个方向改变到另一个方向。

+
+ +

返回值

+ +

如果方向被授权锁定，则返回 true ;如果方向锁定被拒绝，则返回 false。请注意，返回值并不表示屏幕方向确实被锁定：可能会有延迟。

+ +

示例

+ +

使用 DOMString 参数

+ +
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
+
+if (screen.lockOrientationUniversal("landscape-primary")) {
+  // 方向已锁定成功
+} else {
+  // 方向锁定失败
+}
+
+ +

使用 Array 参数

+ +
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
+
+if (screen.lockOrientationUniversal(["landscape-primary", "landscape-secondary"])) {
+  // 方向已锁定成功
+} else {
+  // 方向锁定失败
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('Screen Orientation', '', 'Screen Orientation')}}{{Spec2('Screen Orientation')}}Initial definition
+ +

浏览器兼容

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持{{CompatChrome(38)}}[1]{{CompatVersionUnknown}} {{property_prefix("moz")}}[2]11 {{property_prefix("ms")}}[3]{{CompatNo}}{{CompatNo}}
Array 参数{{CompatNo}}{{CompatGeckoDesktop("18.0")}}11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
default{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基础支持{{CompatNo}}{{CompatChrome(38)}}[1]{{CompatVersionUnknown}} {{property_prefix("moz")}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Array 参数{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("18.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
default{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("26.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] 使用更新的标准语法（screen.orientation.lock）实现类似的方法并返回一个 Promise 。虽然它存在于桌面上，但总是会失败。

+ +

[2] 此API仅作为Firefox OS和Firefox的前缀方法（screen.mozLockOrientation）实现。另外，由于{{Bug(966480)}}，它不适用于Android的Firefox。

+ +

[3] 此方法在Internet Explorer for Windows 8.1和Windows RT 8.1中使用前缀（screen.msLockOrientation）实现。 它在Windows 7 上不受支持。

+ +

参见

+ + 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 +--- +

{{APIRef("Screen Orientation API")}}{{SeeCompatTable}}

+ +

orientation 是 {{DOMxRef("Screen")}} 接口的一个只读属性，返回屏幕当前的方向。

+ +

语法

+ +
var orientation = window.screen.orientation;
+ +

返回值

+ +

一个 {{DOMxRef("ScreenOrientation")}} 的实例，表示屏幕的方向。

+ +

注意在更早的、有前缀的版本中会返回一个 {{DOMxRef("DOMString")}} 值，相当于 {{DOMxRef("ScreenOrientation.type")}} 的值。

+ +

示例

+ +
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 :(");
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Screen Orientation', '#dom-screen-orientation', 'orientation')}}{{Spec2('Screen Orientation')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("api.Screen.orientation")}}

+ +

参见

+ + 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 +--- +
{{APIRef("CSSOM View")}}
+ +

概述

+ +

返回屏幕的位深度/色彩深度（bit depth）。根据CSSOM( CSS对象模型 )视图，为兼容起见，该值总为24。

+ +

语法

+ +
depth = window.screen.pixelDepth
+
+ +

示例

+ +
// 如果没有足够的位深度/色彩深度（bit depth），就选择一个更纯的颜色
+if ( window.screen.pixelDepth > 8 ) {
+  document.style.color = "#FAEBD7";
+} else {
+  document.style.color = "#FFFFFF";
+}
+
+ +

规范

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-screen-pixeldepth', 'Screen.pixelDepth') }}{{ Spec2('CSSOM View') }}
+ +

相关链接

+ + 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 +--- +
+ {{APIRef}}
+

概述

+

返回屏幕的宽度。

+

语法

+
lWidth = window.screen.width
+
+

示例

+
// crude way to check that the screen is at 1024x768
+if (window.screen.width > 1000) {
+  // resolution is below 10 x 7
+}
+
+

备注

+

注意，该属性返回的宽度值不一定就是浏览器窗口可使用的宽度。当有其他小工具占据了屏幕空间时，浏览器有时不能占用小工具（如任务栏）占据的空间。window.screen.width 和 window.screen.availWidth 两者不同。相关属性 {{domxref("window.screen.height")}}。

+

在返回该值时，IE 会考虑缩放设置。只有在缩放比例为 100% 时，IE 才返回真实的屏幕宽度。

+

规范

+

{{dom0}}

-- cgit v1.2.3-54-g00ecf