QVGA is 240 x 320, then WQVGA is 240 x 400, or 240+ x 400?
From Wikipedia:
Wide QVGA or WQVGA is any display resolution having the same height in pixels as QVGA, but wider. This definition is consistent with other 'wide' versions of computer displays.
...
WQVGA resolutions are common used in touch screen mobile phones, such as 240×400, 240×432, and 240×480. Other devices like Apple iPod nano uses a WQVGA screen, 240x376 pixels.
(There are more details on the wikipedia page.)
240, but:
WQVGA has also been used to describe displays that are not 240 pixels
high, for example Sixteenth HD1080 displays which are 480 pixels wide
and 270 or 272 pixels high. This may be due to WQVGA having the
nearest screen height.
https://en.wikipedia.org/wiki/Graphics_display_resolution#WQVGA_.28400.C3.97240.29
So 240 (but also 270 or 272) width (or height in landscape mode) with heights of e.g. 360, 376, 384, 400, 428, 432, 480 pixels. (see table.)
Related
I am currently looking at bootrap 5 ratio as seen here:
https://getbootstrap.com/docs/5.0/helpers/ratio/
By default there are four classes:
.ratio-1x1
.ratio-4x3
.ratio-16x9
.ratio-21x9
I was wondering if I got this correctly when it comes to the dimension of each ratio.
For instance:
ratio-1x1: 1080 x 1080 pixel
ratio-4x3: sized at 1024 x 768 pixels
ratio-16x9: 1920 x 1080 pixels
ratio-21x9: 2560×1080 pixels
Is this correct? Please enlighten me.
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.
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!
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).
and i want to make its width and height same as A4 Page
can ay one tell me whats the size?
note : not neccessary to be the exact width and height !!
It depends on the resolution:
72 dpi (web) = 595 X 842 pixels
300 dpi (print) = 2480 X 3508 pixels
600 dpi (print) = 4960 X 7016 pixels
As can be seen here (wikipedia) you will need to make it 210mm × 297mm.
Converting millimeters and centimeters to pixels (and the other way around) depends on the DPI of the screen you are using - it is not a constant.
See this SO question and answers.
My local photo lab told me A4 dimensions are 21x29.7cm and 8.3 x 11.7 inches.
But, and this is just FYI, when it comes out of their machine you do lose a couple of millimeters from each edge, so most important is to make sure you have configured the output from within your postprocess software (i.e LightRoom or PhotoShop etc) otherwise the composition will be screwed.