My setup: I develop on a 2560x1440 px monitor with a Windows 10 scaling of 125%.
My question/ desire: I want to test a webapp on several specified screen sizes; e.g.,
11"
FHD, 1920x1080 px, (16:9)
When I enter the development tools of firefox (latest version) I have the ability to specify a screen size, see image below. However, this results in a FHD area on my screen that is bigger than 11".
What I need is to have a 11" large test area for my webapp on my screen that has the exact measures like in real world (11" FHD 16:9). Changing the DPR value has no impact.
Related
I'm trying to programmatically adapt my website's image sizes for differently sized devices. But now I am having trouble telling what sizes I actually need. In Google Chrome emulator, I'm seeing some of my images upsized, e.g. on iPhone 6 from 230x230 natural to 357x357 displayed. The image takes up nearly the entire width of the emulated screen, and looks just slightly degraded, suggesting iPhone 6's width isn't much larger than 357 pixels.
But Apple says the iPhone 6 has a resolution of 750x1334! If that were true, the image should look much worse, I would think.
I've found some contradictory information on iPhone 4 as well.
This site talks about iPhone 4 at 640x960 pixels. Chrome emulator again shows it at half those dimensions, 320x480.
This stackoverflow question says that "the iPhone screen is 320x480 definitely."
What am I missing here? Why do some sources (including Apple) supply dimensions that are twice what Chrome emulator (and my images) say?
Relax, you're about to understand this mess. Just notice that 2 * 375x667 = 750x1334.
A pixel is not a pixel
The key thing is: one device pixel is different from one CSS pixel.
They are the same in low pixel density devices like your computer screen (96 dpi). However, high pixel density devices like smartphones and printers (upwards of 160 dpi) try to obey the general W3C CSS3 spec understanding that one CSS pixel should always be close to 1/96th of an inch (or 0.26 mm) when viewed from usual distance (arm's length).
They don't obey the spec to the letter, since that would imply 1px being exactly 1/96th of one real inch in high DPI settings, which wasn't ever implemented in any browser AFAIK. However, they try to make their CSS pixels not so minuscule despite very high pixel densities by making one CSS pixel equal to two or more device pixels.
Chrome Device Mode works with CSS pixels, which is what you should use to design text, navbars, headings etc, but not high-resolution images. For these, read the next section.
If you didn't notice, the image above shows that Chrome Device Mode does show you the device scale (how many device pixels equal one CSS pixel).
Fixing image resolution
As you already know, this affects images negatively, since the browser scales the image as well. Your 230x230 CSS pixels picture becomes 460x460 device pixels, using the same quality. To fix that, use the srcset attribute to give the browser links to different resolution files of the same image.
Example (adapted from the link above):
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
An iPhone 6 will look at that and think "oh, I pretend to be 375px wide but I'm actually 750px, so I'll download wolf-800.jpg."
Just don't forget to use src="" for compatibility. Also, unless you use sizes="", the browser will default to the full width of the device.
I have a Delphi 3 app which has been distributed far and wide for at least a decade. Today I received a report that the app is not functioning properly on an Asus Transformer T100TA-C1-GR(S) Windows 8 tablet. Specifically, the app is refusing to run because it detects a screen resolution too small for the app to properly display itself. In the app, I have the following conditional check:
if (Screen.Width < 800) or (Screen.Height < 600) then begin
// display a message reporting screen resolution too low
ShowMessage('blah blah...');
Application.Terminate;
When I compiled a special version of my app to help debug the problem, and gave the app to the complaining user, they report back the following numbers:
Width: 980
Height: 550
Here is the extra code I added the special compilation that I then gave to the user:
ShowMessage('Width: ' + IntToStr(Screen.Width) + #13#10 +
'Height: ' + IntToStr(Screen.Height));
The user, however, swears that their tablet is configured to 1368x768. They even switched to 1024x768 and the same incorrect numbers are being reported by Delphi.
All TForm.Scaled properties are set to False.
One clue that might help... The screen width and height detection code (above) is run within the following procedure:
procedure TForm1.WMDisaplayChange(var m: TWMDisplayChange);
Any idea what might be going on?
Your application is subject to DPI virtualization. Your app has not indicated to the system that it is aware of and supports high DPI display devices. The machine in question uses a font scaling of greater than 125%. That's the high DPI cut off point. Beyond that scaling, the system virtualizes the font scaling for non DPI aware apps. From the documentation:
Windows Vista introduced a feature called DPI virtualization, which provides a level of automatic scaling support to applications that are not DPI–aware. With this feature, Windows scales the size of the text and UI elements of applications that are not DPI-aware so that they are appropriately sized on high DPI settings without changes in the application. This prevents potential usability and readability issues that occur when applications render too small on high DPI screens.
In Windows Vista through Windows 8, this feature provides "virtualized" system metrics and UI elements to not DPI–aware applications, as if they are running at 96 DPI. The application then renders to a 96 DPI off-screen surface and DWM scales the resulting application window to match the DPI setting. For example, if the DPI display setting is 144, DWM scales the application's window by 150%, or 144/96.
A consequence of this is that the system fakes the screen dimensions. When your application is DPI virtualized the system reports the virtualized dimensions rather than the true dimensions.
Best practice is to declare your application to be high DPI aware, and scale the UI according to the user's font scaling preferences. Of course, this is going to be quite a change for you. Possibly not one that you wish to take one.
Another option is to ask the user to use a reduced font scaling. They probably won't be very keen on that either.
Yet another option would be to manifest your app to be high DPI aware and continue not to scale it. Then it would certainly run, but it would fail to respect the user's font scaling preferences. Again, I imagine that the user would be non-plussed.
If you don't currently manifest your app, then doing so now will result in it not being virtualized. And by that I mean app virtualization rather than DPI virtualization. Whilst you really should not still be running virtualized, you may run into trouble if you disable virtualization.
And Sertac suggests another option. Get the user to apply compatibility settings for your app to disable DPI virtualization. You could apply that to the app as it is today, without re-compiling and at least your user would be able to make progress.
Fundamentally, there is a problem with your user's machine setup. If it has 768 vertical pixels and around 140% scaling, that really is a 100% scaled equivalent of 550 pixels. That's not very many pixels. Your application is objecting because the screen is too small and, well, perhaps that really is the case.
This various answers here may be useful to you: How do I make my GUI behave well when Windows font scaling is greater than 100%
I have an app that I'm testing on my macbook that generates images. They are fairly low resolution. Is there a way to make the images of a higher resolution, or do I have to go to the iPad to generate there? I have the following code that I was hoping would do the trick, but it didn't seem to do anything :
self.imageView.contentScaleFactor = 2.0;
Thanks in advance!
When doing screen snapshots, make sure the simulator's "Hardware" - "Device" settings is for a retina device. Then either the simulator's "File" - "Save Screen Shot" or doing it programmatically will yield a retina-resolution image (regardless of the setting for "Window" - "Scale" in the simulator). Just make sure you've configured the simulator to simulate "Retina" hardware.
When you generate these retina-quality images, though, you don't have the appearance of the physical device (which is nice to have when going to print). If you want the appearance of the physical device, you can marry these screen snapshots with the "Apple Product Images" on the Marketing Resources page (you need Photoshop to do this).
Ultimately, though, you're limited to the resolution of the digital assets in your app. For example, if you don't have retina-quality digital assets (e.g. only 320x480 resolution images), then it will look horribly pixelated when you print it.
And even full retina resolution screen snapshots will look a little pixelated when you print. If you scale your 640px wide screen snapshot in print, if it's much more than 2-3 inches wide when you print, you'll start to notice the pixelation and there's not a lot you can do about that (without cheating in Photoshop and replacing images with higher resolution assets).
I am using JQM with HTML5 boiler plate. My objective (for tests purposes) is to have in a desktop browser, an overall div that will show me the expected size areas of my app on a real device. In a desktop browser, however, the width compared to the iphone4 browser width layout do not seems to match. I do not wish to change the viewport meta definition, although I suspect that it is my problem. Can somebody explain to me:
Why the size of a div of size 640 x 960 px (with a border of 1 px and a position of absolute) does not reflect the same size area appearance on the actual device with this type of setup ?
Regards.
Just use Chrome's Developer Tools. You can choose to spoof your User Agent as well as the device metrics for different devices.
When in Chrome:
Press F12.
Click on the gear icon to the bottom right (settings).
Click on the Overrides tab.
Here you can choose to change your User Agent string or override the viewport of your browser to match specific devices (like the iPhone). If you change the User Agent string to mimic an iPhone then the Device Metrics should auto adjust to be the proper size for the same device.
Note that you must keep the Chrome Developer Tools open, as soon as you close them you lose the UA spoofing and Device Metrics spoofing as well.
To directly answer your question, different screens have different pixel densities, so a screen with higher pixel density will show the same number of pixels in a smaller physical area.
As an add-on,
When dealing with CSS Media queries there is a difference between the
device-width and the
width.
For the iphone4, for instance, although the resolution
(width x height) is equal to (640 x 960),
the device is actually presenting
(device-width x device-height) as equal to (320 x 480)
From here we observe that each CSS pixel is handled by 2 screen resolution pixel. This is the consequence of the 2 different size.
This help: Pixel density for different devices
I'm planning on making my first game in xna (simple 2d game) and i wonder which screen resolution that would be appropriate to target the game against.
Resolution for a 2D game is a difficult issue.
Some people ignore it. World of Goo (for PC), for one very famous example, simply always runs at 800x600 on the PC, no matter what. And look how successful it was.
It helps to think about what kind of device you will be targeting. Here are some common resolutions and the devices they apply to:
1280x720 (720p, Xbox 360 "safe" resolution - free hardware scaling, works everywhere)
1920x1080 (1080p, Xbox 360 maximum resolution - can't auto-scale to all resolutions)
800x480 (Windows Phone 7)
1024x768 (iPad)
480x320 (iPhone 3GS and earlier)
960x640 (iPhone 4 retina display)
Android devices also have similar resolutions to WP7 and iOS devices.
(Note that consoles require you to render important elements inside a "title-safe" area or "action-safe" area. Typically 80% and 90% of the full resolution.)
Here is the Valve Hardware Survey, which you can see lists the common PC resolutions (under "Primary Display Resolution").
Targeting 800x480 for a mobile game, or 1280x720 for a desktop/console game, is a good place to start.
If you do want to support multiple resolutions, it is important to think about aspect ratio. Here is an excellent question that lists off some options. Basically your options are letter/pillar-boxing or bleeding (allowing for extra rendering outside "standard" screen bounds - like a title-safe area), or some combination of the two.
If your graphics need to be "pixel perfect" and simply scaling them won't work, then I would recommend targeting a series of base resolutions, and then boxing/bleeding to cover any excess screen on a particular device. When I do this, I usually provide assets for these target screen heights: 320, 480, 640, 720, 1080. Note that providing 5 versions of each asset is a huge amount of work - so try to use scaling wherever possible.
Many choices about resolution handling will depend on what style of game you are making. For example: whether you try to match a horizontal or vertical screen size will depend largely on what direction your game will mostly scroll in.
When I first started with c++ graphics I used 320*240, or 800*600 when I had to use larger images. But it's really up to you, whatever you prefer. As long as you don't use stupid values like 123*549 or something.
'normal' resolutions include but are not limited to:
160*120
320*240
640*480 (probably the most common)
800*600
1024*768