Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/width

https://i.sstatic.net/KJ0ZI.png

However, upon conducting various tests, it appears that the values returned are actually in CSS pixels.

The value of 360 is displayed for window.screen.width on my Galaxy A5 device (using both Chrome and Firefox).
The value of 768 is shown for window.screen.width on my iPad (via both Chrome and Safari).

These values correspond to CSS pixel measurements.

INQUIRY

Are these results consistent across different browsers? Can I rely on consistently receiving CSS pixel values?

Answer №1

The CSS specification confirms that the unit of measurement used is CSS pixels.

For more information, visit: CSS spec on screen width

Image reference: https://i.sstatic.net/zquAp.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

javascript ios css cordova keyboard

Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min ...

html css twitter-bootstrap bootstrap-4

What are the steps to achieve complete test coverage for my Angular login form? Encountering an issue with reading property 'subscribe' of undefined

Recently, I made adjustments to my login component to align more closely with Angular standards. However, upon testing, I encountered errors of this kind: Cannot read property 'subscribe' of undefined After using console.log for debugging pur ...

javascript angular typescript

Updating Button Text with PHP on WooCommerce

Hi there, I'm trying to find a way to translate a button in my WooCommerce store without using LocoTranslate or any other tools. Is there a PHP function that can help me change the button text without needing an ID? If you want to take a look at the ...

php css button woocommerce

Guide to deploying a React application using Material-UI and react-router

I've successfully built an application using React, Material-UI, and react-router. Below is the content of my complete package.json: { "name": "trader-ui", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^3.2. ...

javascript reactjs react-router material-ui

Struggling to retrieve the value from ng-model?

Currently, I am utilizing this account due to being logged into Facebook on my other account and not having access to my phone for the verification code process. On another note, I am struggling to retrieve the value from an ng-model despite numerous atte ...

javascript angularjs

Create an input box with a designated class

When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance ...

javascript html css

retrieving attribute values from JSON objects using JavaScript

I am struggling to extract certain attribute values from a JSON output and use them as input for a function in JavaScript. I need assistance with this task! Below is the JSON data that I want to work with, specifically aiming to extract the filename valu ...

javascript json attributes

"Adding a class with jQuery on a selected tab and removing it when another tab is clicked

I have 3 different tabs named Monthly, Bi-monthly, and Weekly. The user can set one of these as their default payroll period, causing that tab to become active. I was able to achieve this functionality by utilizing the following code within the <script& ...

javascript php jquery css tabs

Strategies for Returning Multiple Values from a Function in JavaScript

Thanks in advance I am wondering how to extract multiple values from a code block using JavaScript. I am unsure if I need to use an array or something else as I am new to JS. Please consider the following HTML code: <div class="row"> ...

javascript html arrays

What could be causing my file input to appear misaligned?

Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...

html css file input

Cannot locate module using absolute paths in React Native with Typescript

I recently initiated a new project and am currently in the process of setting up an absolute path by referencing this informative article: https://medium.com/geekculture/making-life-easier-with-... Despite closely following the steps outlined, I'm en ...

javascript reactjs typescript react-native import

Extract the chosen document from an input within the Electron application form

Need help with this form <form> <input type="file" name="idp" id="idp" onchange="uploadFiles();"/> </form> Once a user selects an image, I want to move it to a specific folder and save its full name in a variable for database storage. ...

javascript html node.js npm electron

uniformly distribute the list items on the horizontal navigation bar

Does anyone know how to properly space out a ul in a navigation bar, with 5px padding on the right and left and the text evenly spaced in between? body { background: #ffffff; text-align: center; font-family: helvetica, arial, san ...

html css html-lists margin

Encountering the "Unexpected token SyntaxError" message is a common issue that arises while trying to import express-handlebars

Whenever I include this specific line, an error shows up. But as soon as I remove it, the error disappears. const expressHandleBars = require('express-handlebars'); The error message goes something like this: C:\Users\Hp\sample- ...

javascript node.js angularjs mongodb express

Encountering an issue while attempting to run a Node.js server on a Mac, receiving the error message "no appropriate image located."

unknown406c8f2d5ecb:proves airrider3$ node tronServer.js [Error: dlopen(/Users/airrider3/Documents/proves/node_modules/now/node_modules/node-proxy/build/Release/nodeproxy.node, 1): no suitable image found. Did find: /Users/airrider3/Documents/proves/n ...

javascript macos node.js webserver nowjs-sockets

Is there a way to inherit styles from a parent component and apply them to a child component in the following form: `<Child style={{'border': '1px solid red'}}` ?

I am having an issue where the child component, ComponentA, is not inheriting the style I have defined in the parent component. <ComponentA style="{'border':'1px solid red'}" /> Any suggestions on how to resolve this? & ...

javascript vue.js

CSSer Q&A