手机屏幕尺寸像素_如何获得以像素为单位的屏幕尺寸

手机屏幕尺寸像素

There may be times where your JavaScript application needs to know what the size screen needs to be able to perform certain actions.

有时您JavaScript应用程序需要知道什么尺寸的屏幕才能执行某些操作。

Luckily for us, there are built in JavaScript functions that can easily grab different dimensions of the screen on the user’s device in pixels. Which you use is dependent on what you’d like to do.

幸运的是，我们内置了JavaScript函数，可以轻松捕获用户设备上屏幕的不同尺寸(以像素为单位)。 使用哪种取决于您要做什么。

获取用户的分辨率 (Get User’s Resolution)

You might wish to do something involving the user’s device resolution. In this case, you should use the built-in screen.width and screen.height properties. These give you the size of the screen you’re dealing with.

您可能希望做一些涉及用户设备分辨率的事情。 在这种情况下，应使用内置的screen.width和screen.height属性。 这些使您可以处理正在处理的屏幕大小。

This is not the area you have to work with on the page. These values represent the entirety of the screen, that is the user’s display resolution.

这不是您必须在页面上使用的区域 。 这些值代表整个屏幕 ，即用户的显示分辨率。

获取浏览器大小 (Get Browser Size)

There might be an interesting application for dealing with the browser’s current size. If you need to access these dimensions, use the screen.availWidth and screen.availHeight properties to do so.

可能有一个有趣的应用程序可以处理浏览器的当前大小。 如果需要访问这些尺寸，请使用screen.availWidth和screen.availHeight属性来进行操作。

Remember, these are the dimensions of the entire browser window, from the top of the browser window down to where the browser meets a taskbar or the edge of your desktop, depending on your setup.

请记住，这些是整个浏览器窗口的尺寸，从浏览器窗口的顶部到浏览器与任务栏或桌面边缘的位置，具体取决于您的设置。

An interesting note: screen.availHeight can also be used to figure out how tall a taskbar is on a computer. If your browser resolution is say 1366 x 768, and screen.availHeight reports 728 pixels, then your taskbar is 40 pixels high. You can also calculate taskbar height by subtracting screen.height and screen.availHeight:

一个有趣的注释 ： screen.availHeight也可以用来确定任务栏在计算机上的高度。 如果您的浏览器分辨率为1366 x 768 ，而screen.availHeight报告为728像素，则任务栏的高度为40像素。 您还可以通过减去screen.height和screen.availHeight来计算任务栏的高度：

var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels";
/*
For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features.
*/

获取查看窗口大小 (Get Viewing Window Size)

These properties are interesting and can be used to create some nifty effects. You can use window.innerHeight and window.innerWidth to get the size of the window for the web page as the user sees it.

这些特性很有趣，可以用来创建一些漂亮的效果。 您可以使用window.innerHeight和window.innerWidth来获取用户看到的网页窗口的大小。

Keep in mind – these values are not static and will change depending upon what is happening with the browser itself. In other words, if the browser itself is small, these values will be smaller, and if the browser is maximized, they’ll be larger.

请记住-这些值不是静态的，并且会根据浏览器本身发生的变化而改变。 换句话说，如果浏览器本身很小，则这些值将较小；如果浏览器最大化，则它们将较大。

If, for example, you are working in Google Chrome and you open the console (must be docked to a side of the window), window.innerHeight will change to reflect the height of the console because part of the window will be blocked.

例如，如果您使用的是Google Chrome浏览器，并且打开了控制台(必须停靠在窗口的一侧)，则window.innerHeight将会更改以反映控制台的高度，因为部分窗口将被阻止。

You can test this out by calling window.innerHeight, taking note of the value, then increasing the size of the console, then calling window.innerHeight again.

您可以通过调用window.innerHeight进行测试，记下该值，然后增加控制台的大小，然后再次调用window.innerHeight 。

These properties will also change if your browser is maximized or resized in any way. At a browser’s maximum size, the property window.innerWidth is the same as both screen.width and screen.availWidth (unless there is a taskbar on the side, in which case screen.availWidth will not be equal). window.innerHeight is equal to the amount of area in the window of the page itself (the area of the web page).

如果以任何方式最大化或调整浏览器的大小，这些属性也会更改。 以浏览器的最大大小，属性window.innerWidth与screen.width和screen.availWidth相同(除非侧面有任务栏，在这种情况下screen.availWidth将不相等)。 window.innerHeight等于页面本身窗口中的面积(网页的面积)。

获取网页的高度和宽度 (Get Height and Width of Web Page)

If you need to see how tall or wide your web page actually is, there are properties to grab these dimensions: document.body.offsetWidth and document.body.offsetHeight.

如果您需要查看网页的高度或宽度，可以使用以下属性来获取这些尺寸： document.body.offsetWidth和document.body.offsetHeight 。

These properties represent the size of the content in the body of the page itself. A page with no content has a document.body.offsetHeight of close to the same value as window.innerHeight depending on what margins/padding are set on the body of the document. If margins and padding are set to 0 on the html root element and the body of the document, then document.body.offsetHeight and window.innerHeight will be equal with no content.

这些属性表示页面本身正文中内容的大小。 没有内容的页面的document.body.offsetHeight接近与window.innerHeight相同的值，具体取决于在文档主体上设置的页边距/内边距。 如果在html根元素和文档正文上的margin和padding设置为0 ，则document.body.offsetHeight和window.innerHeight将相等，且不包含任何内容。

These properties can be used to interact with your page/application depending on what you want to do.

这些属性可用于与您的页面/应用程序进行交互，具体取决于您要执行的操作。

翻译自: https://www.freecodecamp.org/news/how-to-get-screen-size-in-pixels/

手机屏幕尺寸像素