JS screen res

Sir Osis of Liver · September 06, 2024, 11:21:49 PM

This seems to be accurate on desktop and FF responsive emulations -

https://www.thekrashsite.com/screen.html

How do you see it?

Arantor · September 07, 2024, 03:00:37 AM

It's got some issues, see attached.

Problem 1: orientation. The numbers imply a portrait orientation but I'm in landscape. (Portrait with a page refresh doesn't change the numbers.)

Problem 2: the joy of joys that is CSS pixels vs device pixels. You will see from my attached screenshot that my device is not running in a resolution of 1112x834, but 2224x1668 - a 2x difference. For the record the number you have is the number you *should* be using, but not all mobile devices will habitually do this. Do you have a <meta> tag in the <head> that talks about viewport? (This may also relate to the first problem)

Antechinus · September 07, 2024, 03:57:23 AM

There's no meta tag. There's nothing at all inside the head tag. This is the entire markup.

Code Select

<!DOCTYPE html>
<html>
    <head></head>
    <body style="font-size: 40px;">
        <p id="width"></p>
        <script>document.getElementById("width").innerHTML = "Screen width is " + screen.width;</script>
        <p id="height"></p>
        <script>document.getElementById("height").innerHTML = "Screen height is " + screen.height;</script>
    </body>
</html>

@Sir Osis: What do you want this code for?

Sir Osis of Liver · September 07, 2024, 11:22:15 PM

I've had several situations where forum members reported a problem with responsive formatting but were unable to tell me their screen resolution. If I have that I can set the same res in a FF emulation and hopefully replicate what they're seeing. It's difficult to fix something you can't see.

If I add meta tag it works the same for me, desktop and all FF emulations display correct screen resolution.

Code Select


<!DOCTYPE html>
<html>

<head><meta name="viewport" content="width=device-width, initial-scale=1" /></head>

<body style="font-size: 40px;">

<p id="width"></p>

<script>
document.getElementById("width").innerHTML = 
"Screen width is " + screen.width;
</script>

<p id="height"></p>

<script>
document.getElementById("height").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

shawnb61 · September 07, 2024, 11:45:54 PM

It's very easy to get such info FOR YOU...

But the question is how to get this important info for a remote user reporting a layout problem... What do you need to know to provide support?

I wonder if this should actually be a feature or mod request, to provide a capability for a user experiencing UI issues to share viewport & device info. Local useragent? Zoom %? This might help support folks understand how to address reported layout issues. Maybe the request is for a link in the profile menu that will provide end-user browser & environment info?

Sir Osis of Liver · September 08, 2024, 12:10:59 AM

If that can be done reliably, it would be a big help for support, and for theme authors. I've tried doing this working with screenshots and messing with @media queries, but not being able to replicate what the user is seeing makes it guesswork.

Antechinus · September 08, 2024, 02:43:03 AM

If they know what their device is it's usually fairly easy to find the specs online. These will often include CSS pixels as well as actual device pixels.

Another option is to use a script someone else has already written and tested: https://www.whatismyscreenresolution.org/

^^ Send them there. It provides more information than you'll ever need. It works on desktop, and it works on mobile in both landscape and portrait modes. The only thing it screws up are the display dimensions in inches and cm on mobile (I think the DPR throws it off) but you don't need to know those anyway. As far as pixels go (CSS or device) it works.

Antechinus · September 08, 2024, 03:21:32 AM

Quote from: shawnb61 on September 07, 2024, 11:45:54 PMIt's very easy to get such info FOR YOU...

But the question is how to get this important info for a remote user reporting a layout problem... What do you need to know to provide support?

I wonder if this should actually be a feature or mod request, to provide a capability for a user experiencing UI issues to share viewport & device info. Local useragent? Zoom %?

Re the last one... I recently ran across a handy trick for that too. I even tried it on a test site. Then I very cleverly deleted it and had to go and try to find it all over again. Which is currently proving impossible. D'oh.

In essence it was very simple. You set up a handy div that is 10em high or wide. By default that will be 160 CSS pixels. You measure the size of it with javascript. If it is 240px, zoom is 150%. Obviously this relies on people not screwing with the browser's default font size, but most people don't (even when they probably should).

Sir Osis of Liver · September 08, 2024, 04:02:04 PM

Quote from: Antechinus on September 08, 2024, 02:43:03 AMAnother option is to use a script someone else has already written and tested: https://www.whatismyscreenresolution.org/

That's what I needed, also works in FF emulations. Thx.

News:

JS screen res