Is there a way to obtain a user's screen size without relying on a physical device or measuring the diagonal?

I'm looking for a way to display something at its actual size on a browser. For instance, if something appears to be 20cm on the screen, I want it to truly measure up to 20cm.

Some methods involve considering the diagonal resolution of the screen, like 21.5 inches, and the screen resolution to determine the actual size of a pixel.

Another approach suggests having the user hold a standard-sized card, such as a bank card, up to the screen and measuring the edges to determine size.

Is there a way to achieve this without a physical object on the screen or without the user needing to know their diagonal screen size?

If you have any alternative solutions to offer, please share them as well.

Answer №1

It is nearly impossible to achieve absolute certainty in sizing, particularly in scenarios where the display device is not a standard screen but a video projector. The effective size will vary based on the distance of the projector from the wall, with changes occurring without any feedback reaching the operating system.


Most operating systems offer a dpi (dots per inch) setting, which can be user-configured, system administrator-controlled, or even automatically detected if supported by the video protocol. This setting is essential for the browser to calculate absolute sizes in CSS units such as cm, mm, in, pt, among others.

Therefore, one option is to trust the browser to handle the sizing accurately or instruct users to adjust their settings accordingly. For instance, displaying a 20 cm object on a video projector with a projection size of 3×4 m may not yield the desired outcome.

Answer №2

Someone once mentioned a unique method for determining virtual DPI by creating a hidden 1" div and querying the pixel width. This could then be used to calculate the size based on the screen width and height in "pixels". I'm curious to give this a try myself in the future.

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

Invoke Selenium using JavaScript

Imagine I have this (fictional) JavaScript snippet: asynchronousOperation.addEventListener("completed", function (event) { if (event.property == "required value") tell Selenium we are good; else tell Selenium the test failed; }); ...

Searching through the use of autocomplete with alternative parameters

In the example below, - https://codesandbox.io/s/g5ucdj?file=/demo.tsx I am aiming to achieve a functionality where, with an array like this - const top100Films = [ { title: 'The Shawshank Redemption', year: 1994 }, { title: 'The Godfa ...

Bring in a template from a URL using Angular and then compile it within a div

Being a beginner in Angular JS, I am curious about how to load an external template and compile it with specific data into a targeted div. Here is the sample template: <script type="text/ng-template"> <img src="{{Thumb}}" /> <script& ...

Using Vue.js to make asynchronous API requests using Axios

I am facing an issue with two versions of code, where the second version is not functioning as expected. I suspect it may be due to a contextual problem that I am unable to pinpoint. The first version of the code works fine: // Fist version (it works) met ...

What sets usePreloadedQuery apart from useQueryLoader?

I've been exploring graphQL and the react-relay library. These are the key points I've covered: Rendering Queries: where usePreloadedQuery is introduced. Fetching Queries for Render: where useQueryLoader is introduced. To keep it simple, I&apo ...

The .find() function conveniently jumps over the table directly following its parent element

After clicking on Inner Add Row, the correct row is added from the .charts-series table. However, when I click on Outer Add Row, a row from the .charts-series table is added instead of one from the .charts table. Here is the link to the example: http://jsf ...

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

Adjust the parent's height to match the child element using relative and absolute positioning

I am struggling with a seemingly basic issue and can't seem to figure it out. Basically, I have a parent element with a relative position, and a child element with an absolute position. How can I make the parent element expand to match the height of ...

Achieving a fixed 16:9 aspect ratio for the VLC web player: a detailed guide

Below is the HTML code provided: <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="600" height="350" id="vlc" loop="yes" autoplay="yes" target="myvideo ...

NestJS is having trouble importing generated types from the Prisma client

When working with Prisma in conjunction with NestJs, I encountered an issue after defining my model and generating it using npx prisma generate. Upon importing the generated type, I can easily infer its structure: import { FulfilmentReport, FulfilmentRepor ...

The useMutation function trapped in an endless loop

I've been encountering an issue while running a query to save an entity in the database using usemutation. The saveVisa() mutation seems to be stuck in an infinite loop, creating the same element multiple times without any clear reason. import {React, ...

How can you temporarily delay the original ajax request until a certain condition is satisfied before proceeding?

I'm looking to set up a recaptcha process that intercepts all ajax requests before they are executed - here's how I envision the process unfolding: A user performs an action that triggers an ajax request. If the user has already completed the r ...

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

`Generate JSON list`

How can I properly encode an array in PHP as JSON, ensuring it includes two variables? $var = 33; $last = 44; Here are the database results: foreach($query->result() as $r) { $data[]= $r; // Fills the array with results } I am attempting to cre ...

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I ...

Guide to handling multiple forms within a single template using Express

If I have an index.html file containing two tables - "Customers" and "Items", along with two forms labeled "Add customer" and "Add item", how can I ensure that submitting these forms results in a new entry being added to the respective table as well as t ...

Looking to retrieve just your Twitter follower count using JavaScript and the Twitter API V1.1?

I am trying to retrieve my Twitter follower count using JavaScript/jQuery in the script.js file and then passing that value to the index.html file for display on a local HTML web page. I will not be hosting these files online. I have spent weeks searching ...

Routes are no longer being qualified by Express once a subdomain is incorporated

We had developed a compact app that was working flawlessly, but then we were tasked with transforming it into something accessible for others in our organization to utilize... and that led to everything breaking down. Our initial setup included a simple ex ...

Display Checkbox Selections in a Popup Message Box

I've run into a problem while working on an assignment. My goal is to show the checkbox values for toppings in the alert box popup upon submission. However, only the text box and radio values are displaying, while the checkbox returns as blank. Any ...