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.
Related
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.
Information to clarify the terminology from here.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should
be approximately the same size on all devices. An iPhone 5 is 320 dips
wide.
CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS
pixels. The ratio of CSS pixels to device independent pixels is the
page's scale factor, or zoom.
Is there are any way to set relationship between Hardware pixel and CSS pixel like 1:1.
I mean if i want set my div's width to 100px, it will be exactly 100 hardware pixels even on Retina displays.
Screen scale factor (Retina, presently either 2x or 3x) is distinct from page scale factor. At the same page scale factor, 1px would be 1x1, 2x2, or 3x3 hardware pixels, depending on the (Retina) display.
It sounds like what you're looking to do is to drive the screen at a "native" resolution which would make it appear that it has 2x or 3x as many pixels, but at a (non-Retina) screen scale of 1.
To accomplish that, you'd have to transform the view by multiplying its size by the screen scale factor, while scaling it by the inverse of its screen factor.
You can set the head's <meta name="viewport" content="width=device-width-times-2, initial-scale=0.5"> but your content will be far less readable and sharp.
If you're looking to do this on an element basis, you can set
-webkit-transform-style: preserve-3d;
-webkit-transform: scale3d(0.5,0.5,0.5);
3d is necessary, as a 2d transformation may lead to issues with the touch area not matching up with the element's location in the view.
I think you can use device-width with min-device-width and max-device-width properties to access hardware pixels. device-width - describes the width of the output device. For example:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }
Here you can find a map of standard devices and media queries for them.
Also, you can setup media queries for different devices DPI you can use min-resolution property in media on this way:
#media print and (min-resolution: 300dpi) { ... }
To replace the old min-device-pixel-ratio syntax use this:
#media screen and (min-resolution: 2dppx) { ... }
Here is a source.
Basically, in clear CSS you can't get access to hardware pixels. You can just optimize pages to different resolutions.
You can use:
#media screen and (max-width: 300px) { /* To Do */ }
link visit: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
If you want the exact relationship I don't think you can do it in CSS.
But you can do it in JS :
To get the width of a 100px wide div :
var myDivWidth = 100 / window.devicePixelRatio;
So on an iPhone 5 with a pixelRatio of 2.0 you will have a 50px wide div spread over 100 physical pixels.
You could to the same with css transform:scale(0.5) if you want to shrink div content too.
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).
I want to create a template . If the user monitor at least is 14 inches , It has a ppi for itself maybe 102 or something else.
So What ppi should I set for my web template to avoid the screen horizontal scrolling ? Is it the maximum ppi of the 14 inches monitor ?
ppi/dpi (dots per inch) doesn't work here: Different 14 inch monitors can have different resolutions - the number of pixels displayed on the screen.
For your purposes, the only thing you need to worry about is the user's resolution.
The size of a pixel can differ depending on the device's size, but it doesn't matter for layouting.
If you want to avoid scroll bars, either choose a very low pixel width (960 pixels is deemed ideal by many, because layouts with that width are guaranteed to work on a 1024 x 768 resolution) or use relative widths instead of pixel sizes.
Related:
Smashing Magazine: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
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.)