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.
Related
I have 2560 x 1600 px resolution on my MacBook and when I make a div with size parameters half smaller than my resolution (i.e. 1280 x 800) I expect my browser to use half of the screen surface, but instead it shows zoomed object, how can I fix this?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height: 800px; width: 1280px; background-color: cyan;">
</div>
</body>
</html>
This is due to the device pixel ratio: If the DPR is 2 (as for most retina displays), each "CSS pixel" (i.e. the pixel settings you set in CSS) is 2 times as wide and high in device pixels, allowing a finer resoltion for vector-based graphics (including fonts). So you have to divide the real resultion values of a device by that number to get the corresponding CSS pixel value.
In media queries you can also use device pixels, but not in regular CSS rules.
Some more info here: https://hacks.mozilla.org/2013/09/css-length-explained/
Please check your display scale/ zoom level.
Tip : you can use vh and vw in css if you want to scale your div relative to our screen size.
100vh is full width.
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.
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?