I am trying to understand why if I have a Webseite working on 1920px width and I have smartphone with 1920px resolution, it will display different?
I found that Answer (URL) but this confused me even more.
An Example for me:
I have a div Header which has a 100% width and this Header contains 10 images, when viewing this on Desktop everthing is fine (Desktop width 1920px) Now I am changing to my smartphone which also has a Resolution from 1920px and some of the are not in the line anymore. So why isn't that possible?
The Answer with DPI is confusing me because:
I have 2 Screens, both of them has the same Resolution. My Android has bigger Pixel than my Desktop, so how is ist possible that they both have the same Resolution than?
If someone could explain me that or refers an article which explains that, I would be so thankful!
Markus
What he's saying is:
The resolution is the same but the PHYSICAL size of each pixel is different.
Let's assume your screen is 100cm long and your smartphone is 10cm long.
If your screen has 1920px, each one is 100/1920= 0.052cm long.
If your smartphone has 19202px too, each one will be 10/1920 = 0.0052cm long
I considered just one dimension to make it easier. As you can see the physical size of pixels is different and so is the result.
Now you might ask yourself "Ok, but how do I fix this?"
Well instead of saying "Make this item 10px long"
you can say
"Make it 1cm long"
We've seen that pixels size can change from one device to another, but physical units don't.
So 10 pixels might be longer or shorter from device to device but 1cm is always 1cm.
I hope i clarified your doubts! :)
Solution for me was simple:
Example:
Galaxy S4 Resolution (Hardware Pixel) : 1920x1680
Pixel Ratio : 3
Galaxy S4 Optical Pixel: 640x340
Related
I've been trying to fix an issue where the full-width hero images on my Wordpress website appear blurry on some mobile devices, and in the process I've noticed that this seems to be triggered only at smaller sizes.
The images I'm using are 1920 x 1080 pixels.
Between a width of 1920px to 1024px the images look high-quality and unchanged as far as I can tell, but using Firefox's Responsive Design Mode, I've established that the smaller the image renders the more progressively blurrier (i.e. pixellated) it becomes.
If the browser window is resized to a width of 1023px or less, it becomes a little blurry, whereby setting the DPR setting to 2 restores it to the original quality.
If the browser window is resized to a width of 512px or less, the image becomes very blurry, and setting the DPR to 3 restores it to the original quality.
What's going on here? I understand that the images aren't Retina-optimised, but if this was the actual cause, wouldn't the problem be reversed - wouldn't it be the larger image size that would render blurry? Shouldn't the smallest image render at a high DPI considering it's being displayed at a size of 512px and the source image is much less than double (2x) the 1920px source image?
Would really appreciate some help figuring this out as I've been struggling with it for a few days and it's very hard to test against and debug.
A HiDPI image is really just one that's larger than the display size but crushed into a smaller physical space.
For example if your 1x image is 500px x 500px, then a 2x image would be 1000px x 1000px and 3x would be 1500px x 1500px. The HiDPI designation comes in because the device is able to display all those extra pixels in the same physical space as a normal screen.
So imagine a normal screen is 100px per 1 inch. So your 500px image would be 5in x 5in. The HiDPI screen might be 200px per 1 inch of screen so the 1000px image would still take up 5 inches.
Typically smaller images get blury on HiDPI displays because they're trying to "up res" something like a 500px x 500px image to a display size of 1500px x 1500px.
As for the problem you're experiencing, have you verified the issue on a real device not the FF emulator? Real devices are usually much better at that "up res" process and may not produce the same artifacts.
I have been designing all my landscape oriented cocos2dx mobile games at 2508x1584 with a "always visible area" of 2112x1408 so there would be no black borders or scaling, just a bit of cropping which would be limited to the "maybe not visible area" as shown below.
This worked well for all mobile device aspect ratios until iPhone X and Samsung Galaxy S8 arrived. These devices have 19.5:9 and 18:9 aspect ratios respectively which takes the "always visible area" down from 1408 to 1158 which is significant enough that it looks like i have no choice but to redesign all my games as shown in the image below.
Since I designed all my previous games for a taller visible area when I run them on iPhone X and Samsung galaxy S8 the top and bottom of the game are obviously cut off.
Am I stuck re-designing these games in order to make them fit this shorter aspect ratio? Or is there another solution I am overlooking here?
Sadly I don't see any magic solution. Here are the different options:
Test the screen ratio, and for iPhone X and Galaxy S8, switch resolution policy to ResolutionPolicy::SHOW_ALL instead of ResolutionPolicy::NO_BORDER. That's a quick-and-dirty solution, which will display black borders on left and right. You can improve this solution a little bit by scaling all content so that the important area takes all screen height.
Change the width of your design resolution, offset the content, and find a way to fill all this resolution with your background textures. This requires more effort but most of the content should not change, except for the offset. It will solve the problem because a larger design resolution means that it has less to cut vertically (which is the problem in your case).
As you said, you can also redesign the important area so that it is more flexible to different ratios. This requires some effort and reduces the size of this important area, which affects the experience on the other ratios.
I would go with the second option. Hope this helps, and sorry for not having a magic solution to that problem.
Might be a bit late for you, but I think I've solved this issue.
I used ResolutionPolicy::NO_BORDER, a design resolution of 1080x1920 and this guide image
The green area is 1080x1920. You should design your app to fit within this area. Taller phones such as the S8 and iPhoneX will expand up into the orange space. Wider devices such as tablets will expand into the orange space on the left and right.
What you need to do on launch is to calculate a scale factor for the Director to use.
Do this in your AppDelegate.cpp
auto frameSize = glview->getFrameSize();
float deviceAspectRatio = frameSize.height / frameSize.width;
float designAspectRatio = designResolutionSize.height / designResolutionSize.width;
director->setContentScaleFactor(MAX(
deviceAspectRatio / designAspectRatio,
designAspectRatio / deviceAspectRatio)
);
To be honest I'm not 100% on why this works. I discovered it by trying random scale factors until I found one that worked, and then trying to work backwards to come up with some math that will work. Turns out dividing the aspect ratio of the device by the aspect ratio of your design resolution is what you want.
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 4 months ago.
I am working on 3 HTML5 responsive websites and they all need to be adapted for devices.
I understand so far the media queries for small devices and I have seen good score on that, 320px, 375px, 425px, 480px, 768px, 1024px.
Now the "problem" comes for bigger screen.
I still have few doubts, for example in the office where I am working they have really big screen 2560px but how should i write the right queries for that ?
I have an 11" macbook and my colleagues have also got a bigger one 13" where the homepage is showed in a different way.
Should i also set a max-width 1680px, max-width 1920px and max-width 2560px? I saw on Google that this are the most common big screens and is apparently "working" when I checked back in the office.
The real questions are: How should I work on bigger screen? Which settings should I use to show the same webpages on different big screens?
The answer is that you should have a final width you design for and then eventually center that div in the middle of the page, so that even if the screen gets wider, the only thing that'll get wider is the background surrounding the div. You will need to set width of the div to a fixed width.
Even for larger screens, there gets to be the point where scaling larger fonts, makes the experience to cumbersome to read. If the content were to be scaled to 100% of the browser's width, it would take too long for the reader to read the information desired, hence why centering a fixed div works. It is also conveniently less work for the developer as well.
In terms of smaller screens, you would probably need to scale the div that contains all your information to 100% of the browser's width at a certain breakpoint via media queries.
The end result should look like this:
100% browser width --> fixed centered div with a background
(mobile + tablets) (large screens)
My app traces Capabilities.screenResolutionX and Capabilities.screenResolutionY. This outputs 1024x768 for my ipad mini. Okay so i begin shaping my app with 1024 width and 768 height for landscape display.
The problem is that my 1024x768 content is put in the middle of the ipad screen with a white space on both the left and right side. So i test it even closer. I make a green square with these dimensions and place it at x:0 and y:0. It's still wrong. So is my ipad screen bigger than what Capabilities.screenResolutionX outputs or is it just kinda bugged so you have to make everything some inches bigger?
In case it wasn't clear: It's only the width that doesn't match and have extra whitespace on both sides. The height is fine, an exact fit.
Ensure that requestedDisplayResolution is set to be high in the XML eg:-
<iPhone>
<requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>
Use 'Full screen' in publish settings.
I've been reading about the #2x images being only image that are twice as big as regular image, but do we have to change the DPI to make the quality better or we only need an image that is twice as big ? I don't understand why would a twice as big image of the same quality would be better? Thanks alot
Don't worry about DPI it doesn't matter for screens, but to answer your question making an image twice the size with the same quality would have a much higher pixel density than the original, therefore the pixels rendered will be much sharper and well defined.
For example:
Original image: 300px x 300px = 90,000 pixels
Retina image (same quality): 600px x 600px = 360,000 pixels
Now when the browser renders the Retina image, it still renders it in the same 300px by 300px space as the original image. This means that there are 360,000 pixels in this image instead of the 90,000 pixels before. Now there are lots more pixels to render the same image, so the image is going to look more defined.
For screen, DPI doesn't exist. The raw basic you need to understand is pixel count. You can have a 100px x 100px image that's 1 DPI or 100,000,000 DPI, it makes no difference.
If you really want to learn some more, take a look at http://en.wikipedia.org/wiki/Pixel_density
But for screen output, you can just ignore DPI.