How does monitor size influence a desktop application - compatibility

I want to know if a fixed sized application would look exactly the same(talking about the size of the window) on any monitor. Let me give you an example.
Let's say that I have a PyQt5 application with a fixed size of 600x400 pixels. I run this application on my 14 inch LENOVO laptop(its resolution is the recommended one, 16:9) and it will look fine, application's window is not too big for the monitor and also not too small. But if I take this application and run it on a PC which has an 22 inch ACER monitor(same resolution, 16:9) will the application's window stretch or will it look smaller? I mean, the a 600x400 window would look smaller on a big monitor right? Or will the OS somehow stretch it?

Related

How do I make Qt allow a window to take up more than 2/3 of the screen when I call adjustSize()?

I'm trying to make a window adjust to it's optimal size and need to do so quite often. The window is able to dock along the edges of all the screens attached to the computer but when I move to a narrow screen, the window has it's width reduced to 2/3 of the screen's width; as per the documentation.
I can't calculate the size of the window, on my own, beforehand and have to rely on Qt doing the right thing.
I have fairly limited options regarding refactoring (as in pretty much none).
The correct version is from a screen that's 2560 pixels wide.
The narrow version is from when the window is placed on a screen that's 1080 pixel wide.
As you can see, three of the icons are missing in the narrow version.
The size of the window is not some fraction of the screen. It has to be exactly big enough to contain it's content; no more nor less. The problem is not setting the size of the window as such: it's making sure that the size does not adjust itself to narrow screens when adjustSize is called.

Running Pyautogui on a different computer with different resolution

I have a python script which runs perfectly on my work computer (1600 x 900 resolution). It is on this computer that I took all the screenshot images used by pyautogui.locateOnScreen. I tried to run this program on my home laptop with a different resolution (1340 x 640) and the script does not seem to find the image location. I am guessing that it is because of the different resolution. (I have copied the script folder from my work computer to the home computer, so the path to the image file is exactly the same). Is there anything I can change in my script so that pyautogui.locateOnScreen would identify the image on any computer resolution?
I'm the creator of PyAutoGUI. The problem you have isn't with the screen resolution, but the screen scaling. Your program will work fine on monitors at different resolutions. But at high resolutions, the text and buttons of your programs become too small and so Windows and macOS fix this with "screen scaling", which can increase the size of UI elements like text and buttons by 150% or 200%. If you have multiple monitors, each monitor can have it's own screen scaling setting; for example one monitor at 100% and another at 150%.
If you take a screenshot while a monitor is at, for example, 100% and then try to use it on a monitor that is scaled at 200%, the image won't match because the screenshot is literally half the width and length of what it would have been on the 200% monitor.
So far, there is no work around for this. Resizing the screenshot might not work because there could be subtle differences and the screenshot mechanism currently needs a pixel-perfect match. You just need to retake the screenshots on the monitor with the different screen scaling setting.
I think you'll need to take a screenshot of the image on the different resolution, and at the start of your program have it detect whether it's on the 1600x900 screen or the 1340x640 screen. Then make all the 'locateOnScreen' pieces take a variable, and depending on the screen size, replace those variables with the path to the correct image.
import pyautogui
def function():
pyautogui.locateOnScreen(x)
...
pyautogui.locateOnScreen(y)
...
screen = pyautogui.size()
if screen = (1600, 900):
x = 'image1_1600_900.png'
y = 'image2_1600_900.png'
else:
x = 'image1_1340_640.png'
y = 'image2_1340_640.png'
function()

Is there a way to simulate 4K resolution on my PC?

I am developing my website's design, and unfortunately I don't have a 4K monitor at the moment, but I want to see how will my website look at that resolution.
I am worrying because my website's background image has 2560 x 1600 resolution and CSS parameter background-size: cover;. I hope it won't have black background-color around the image, just because the image is smaller than 4K.
So is there any way to simulate a 4K resolution on PC?
You can use Mozilla Firefox to do the same.
Press Ctrl+Shift+M and firefox shall switch to 320 X 480 Resolution, Now you can edit the values in top and set it to 4096 X 2160 to emulate 4k resolution.
You will get both Horizontal and Vertical Scrolls
Below is the sample Screen for Same :-
You can test inside a VM with the VM set to have a higher res than your real screen:
https://techcommunity.microsoft.com/t5/windows-dev-appconsult/testing-application-on-various-screen-resolution-s/ba-p/316796

Consistent touch target size on High DPI mobile device ? (WebApp scenario)

Considering a css pixel is not a device pixel on high DPI device, predict and manage touch target size across these devices have been a headache for me.
For example, say I have a Web App with viewport meta "width=device-width, initial-scale=1.0", on iPad (9.7 inch screen) in landscape mode, viewport is set to 1024px, and 50px (in css) is roughly 1cm in physical size.
However for device such as Nexus 7 (7 inch screen), viewport would be set to 966px, thus 50px (in css) is only about 0.7cm in physical size. (Not to mention a growing list of High DPI device that I may not get my hands on)
Different guideline varies on recommeneded touch target size, but I tend to prefer around 1cm to allow for human error.
Is there a best practice for such scenario? the idea described in Let's Get Physical (Units) is the closest I found via google, but far from production ready.
Start using em or percentages instead of px.
This is probably going to be what pushes everyone over the line.

Div width in cm (inch)

I need to put in my site div which is exactly 25cm width ( 10 inch) in every display. How I can do it ?
You can simply use the cm unit in CSS:
#mydiv { width: 25cm; }
Note that, as others pointed out, the result still depends on the correct reading of the monitor size by the operating system.
See the spec for more information.
How I can do it ?
You can't. Update: apparently, you can on many modern systems: Check out #Tomas's answer. It seems not to be always entirely reliable, though.
Old answer: You can't. Monitors display different numbers of pixels. The pixel size varies wildly from monitor to monitor.
There are ways to interpolate the pixel size if you know the monitor size. This information is sometimes available to the operating system; however, it is impossible for a web site to get hold of this information.
The only way to go would be to have the user do a calibration. For example, ask the user to hold an A4 piece of paper to the monitor, and use a draggable ruler to determine the area it covers. Using that information, you can then calculate how many pixels you will need to show 25 centimeters.
Update: #Tomas claims in his answer that using CSS cm values works on screen.
This is in fact true on my Windows 7 and 23" Plug&Play TFT Monitor (1920x1080 Pixels): 21cm translates perfectly to the short side of a A4 sheet of paper in Chrome 7, IE6(!), IE7, Firefox 3.6.
It doesn't seem to be entirely reliable, though: #Yi Jiang can't get it to work on a TFT using Ubuntu Linux; also, older Monitors may not send through their size information so it'll be impossible for the OS to determine a correct size.
Here's a simple JSFiddle for testing.
You can't. A program can only get the true physical dimensions of a screen by interrogating EDID as values returned by the Windows API are not reliable. A program can get the true values for resolution (e.g.1280 x 1024) and screen dpi, but browsers can't do any of this by themselves.
There is a constant confusion between the "physical dpi" of a screen and "screen dpi". The physical dpi, more properly called pixels per inch, is obtained by dividing the maximum pixel width of the screen by the physical (ruler) width in inches. The pixels per inch are fixed by the manufacturing process. The screen dpi is a number that the user can set via the Control Panel and it's only purpose is to convert a value in inches into a number of pixels. The user settable screen dpi value has no direct relationship whatever with the physical dpi (pixels per inch) and is just a number with a default value of 96. There is nothing magic about 96, or 120
Number of screen pixels = number of inches x screen dpi
It's as simple as that.
The reason 21 cm on a 23 inch monitor at 1920 x 1080 "translates" to the width of an A4 sheet (21 cm) is because with a 23 inch diagonal the screen width is 20.05 inches and at 1920 pixels across the pixel density is 95.76 pixels per inch.
With screen dpi default value of 96 then for one inch: pixels = 1 x 96 = 96 pixels
The pixel density of the 23 inch screen is 95.76 pixels per inch which matches the number of pixels you get, when specifying a length of one inch, with the default screen dpi value of 96.
If screen dpi is changed in the Control Panel, or the monitor video resolution is changed, then 21 cm would not match the width of a sheet of A4.
You will need to get hold of the resolution of the display and the dot pitch of the monitor to be able to calculate this.
Given these two values you'll be able to calculate the number of pixels you need.
However, you can't get hold of this information from a web site.
Given that you state it's a <div> in a site, we know you're in a web browser environment.
Sadly for you, the web browser doesn't have any way to find out the screen's DPI. You can find out what the screen resolution is, so you'll know whether the user has 1024x760 or whatever, but you'll never know whether those 1024x768 pixels are being displayed on an iPhone sized screen or a billboard, or anything in between.
Sorry about that.
I believe the layout engine would need to know three things to make this possible:
Screen resolution
DPI
Physical monitor size
As far as I'm aware, it doesn't know all three.

Resources