Imagine devices with resolutions
a) 300px x 400px
b) 600px X 800px
c) 900px x 1000px
Now if create a web page with a div whose width is 150px. Irrespective of all other factors (including browser)
it should occupy half of width in first device.
1/3rd of width in the second device.
1/4th of width in the third device.
However, the absolute size of the div depends on the screen size.
This was my assumption. This held good in few devices and breaks in others. What other dimension am I missing?
It depends on screen resolution.
Consider an old iphone and an iphone with retina dispay.
The old iphone's screen is 320 x 480 pixels.
The iphone with retina display has a 640 x 960 pixels screen.
However, both screens are the same physical size (3.5 inches) and a 300 pixels wide square is rendered at the same physical size on both.
Both devices have a logical screen size of 320 x 480 points :
On an old iphone, every point is 1 x 1 pixel.
On an iphone with retina display, every point is 2 x 2 pixels.
When you set width: 150px, it'a actually 150 points.
A zoom-factor of 2 is applied on the iphone with retina display.
The square is actually rendered 300 pixels wide to match the physical size of the non-retina one.
See this site for size table : screensiz.es
Width gives you the actual pixel width.
Device with gives you the logical width.
Pixel density gives you the zoom factor.
Check the Galaxy SIII for exemple :
Pixel density is 200% (zoom-factor of 2), width is 720 but device-width is actually 360 (device-width divided by zoom-factor => 720 / 2).
Related
I am trying to understand this table in Bootstrap 5.
So far what I understand is this:
Extra small (xs) - targeting mobile devices that have a max-width of
576 pixels.
Small (sm) – targeting devices with a resolution greater than 540
pixels but smaller than 576 pixels.
Medium (md) - targeting devices greater than 720 pixels and smaller
than 768 pixels.
Large (lg) - targeting devices that are larger than 960 pixels but
smaller than 992px pixels.
Extra large (xl) - targeting devices that are larger than 1200pixels
but smaller than 1140 pixels.
Extra extra large (xxl) - is for all resolutions greater than or
equal to 1400 pixels.
Wondering if what I stated above are correct? Please help
You understand wrong. The right way is:
Extra small (xs) - targeting mobile devices that have a max-width of
575 pixels.
Small (sm) – targeting devices with a resolution greater than and equal to 576 pixels but smaller than 768 pixels.
Medium (md) - targeting devices greater than and equal to 768 pixels and smaller than 992 pixels.
Large (lg) - targeting devices that are larger than equal to 992 pixels but smaller than 1200px pixels.
Extra large (xl) - targeting devices that are larger than equal to 1200 pixels but smaller than 1140 pixels.
Extra extra large (xxl) - is for all resolutions greater than or equal to 1400 pixels.
If you go to any phone specifications on any website they usually have resolutions like:
1080 x 2340 pixels, 19.5:9 ratio (~409 ppi density)
720 x 1280 pixels, 16:9 ratio (~294 ppi density)
But using the same phones and going to a website that uses max-width of 600px, the media query still works. Also when checking the resolution on whatismyresolution it says that the width is 360px and the height is around 700px on both phones. How is the resolution calculated on the browser?
To get the resolution of a mobile device we need to multiply the screen width and height with the device pixel ratio.
i.e. window.screen.width * window.devicePixelRatio and window.screen.height * window.devicePixelRatio.
Re the media query does works with max and min width as well as height , so we can define the resolution accordingly in css or less code if we target any specific resolution to support or target.
The browser view-port size on a mobile device is often much lower than the screen resolution of that device. For example: on the iPhone X, the screen resolution is 1125 x 2436 whereas the view-port size is 375 x 812.
Given this, how can you make an image display with full resolution on a device such as the iPhone X? If you render an <img> whose src has a width of 375px, it will fill the width of the iPhoneX's screen. How can you alter this so that it only fills a third of the screen as per the device's true resolution, and displays in full quality? That is, how can you make the image display in terms of the true screen resolution and not the view-port size.
width: 33%;
or
width: 33vh;
will have it be one third the width.
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.
Chrome 46 on my desktop loads the right images when i resize the browser to different widths. However on my phone it loads the largest image! the 1024w one. When i go to http://html5test.com/ on my phone it says its supported. Can anyone confirm that it's just not working correctly on mobile?
<img src="https://c1.staticflickr.com/1/667/22803832666_5142663029.jpg" srcset="https://c2.staticflickr.com/6/5642/22373891881_0508995dc9_b.jpg 1024w, https://c2.staticflickr.com/6/5642/22373891881_0508995dc9_c.jpg 800w, https://c2.staticflickr.com/6/5642/22373891881_0508995dc9_z.jpg 640w,https://c2.staticflickr.com/6/5642/22373891881_0508995dc9.jpg 500w" sizes="80vw" />
Your S6 has a device width of 360 pixels.
Its display has a super-high pixel density of 4x, so a total amount of 4 * 360 = 1440 physical pixels width in portrait orientation. (4 * 640 = 2560 in landscape)
80% of that, as specified in your sizes attribute, is 1152 physical pixels wide, so the your browser is correct in trying to get the largest image you have for that space on such a high-ppi screen.
I hope this helps!