CSS pixel:
div.sidebar {
width: 300px;
}
css-pixel-width = device-pixel-width x 1 / Device-pixel-ratio
For example: Say, a device with 1920(w) X 960(h) device pixels and dpr = 2.
css-width = 1920 * (1 css px / 2 device px) = 960 px
Device pixel:
#media all and (max-device-width: 320px) {
....
}
Zooming factor:
When the zooming factor is exactly 100%, one CSS pixel equals one device pixel (though the upcoming intermediate layer will take the place of device pixels here.) The image below depicts that. Not much to see here, since one CSS pixel exactly overlaps one device pixel.
I should probably warn you that “zoom 100%” has little meaning in web development. Zooming level is unimportant to us; what we need to know is how many CSS pixels currently fit on the screen.The following two images illustrate what happens when the user zooms. The first shows device pixels (the dark blue background) and CSS pixels (the semi-transparent foreground) when the user has zoomed out. The CSS pixels have become smaller; one device pixel overlaps several CSS pixels. The second image shows device and CSS pixels when the user has zoomed in. One CSS pixel now overlaps several device pixels.
Question:
1) How to manage zoom levels? Does auto-scale attribute of meta tag decides the zoom level?
Viewport: It’s the area (in CSS pixels)
Wrt viewport pixel,
initial-scale sets the relation between CSS pixel and viewport pixel, as mentioned here. For example: initial-scale = 1 mean 1 CSS pixel is equal to 1 viewport pixel.
Question:
2) What is viewport pixel?
Sounds like the answerer made up that term on the spot when answering the linked question. It doesn't help that their answer (before I edited it) consisted entirely of blockquotes, giving the false impression that they cited an external source that apparently defined those terms.
CSS does not define such a term, nor does any other specification. The viewport meta tags simply change the zoom behavior of a mobile browser and don't have any meaningful effect on rendering.
Related
This question presumes: device-pixels are absolute (fixed, not relative to anything).
Following reading this article,
My device (MacBook Pro 2019) has a pixel ratio of 2 (2 device pixels in every CSS pixel when zoom-level 100%; calculated by .devicePixelRatio). At 100% zoom-level, CSS pixels (as measured with .innerWidth) are the same as device pixels (as measured with screen.width & Cmd + Shift + 4 + click). I was expecting CSS pixels to be half the value of device pixels.
Why does MDN say CSS pixel is an absolute value when zooming in actually increases the size of a CSS pixel (by increasing the amount of device pixels it equals to)? Why is this in MDN?
In your case the scaling is done at the OS level, so everything will "lie" because your OS is set to lie to every applications, including the browsers.
The window.screen.width value will be the one reported by your OS, but in your system preferences, it says that you want the resolution of your display to be set to half of its real resolution, that's what you'll get.
So even these values are not device pixels, but some kind of CSS pixels (well window.screen.width is really 'CSS pixels', the one from the ScreenShot app isn't).
However, while "lying" about the number of pixels, it correctly exposes the pixel density (number of physical pixel used per px). That's what you'll have in window.devicePixelRatio when the browser doesn't apply any zoom by itself. Unfortunately, we don't know when the browser applies such a zoom, so as web-devs, we can't know the OS pixel density, nor the true resolution of the device.
As for the second point, I will assume you asked why MDN says CSS pixels are absolute rather than relative as written in your question.
This doesn't mean that a CSS pixel will always have the same physical dimension outputted (which is impossible btw, think of a video-projector), it's in contrast with relative lengths like %, em, vw, etc. which are relative to an other length.
CSS pixels are absolute in that they don't rely on any other length, even though the physical output may vary.
I am using the following viewport meta in my html:
meta name="viewport" content="width=device-width, initial-scale=1
Which works perfectly for mobile devices. However, on the desktop version all assets, fonts and even the various elements are increased in size by 20%.
For example, see the image below. Even though the image is defined as being 300px by 300px in the devtools, if I take a screenshot and measure it in Photoshop it is in fact 360px by 360px.
The browser zoom is at 100%. What am I doing wrong?
/** EDIT **/
So, I found out that Windows sets the size of images and text to a default of 125%. That is why my website images and text were looking bigger. Now that I can see that is the case, how can I find a workaround so that even with the setting at 125% the images and text will display as intended? Is it even possible?
The problem is that a CSS px is not equal to a physical pixel. The definition is complicated, but in desktop browsers, the ratio between a CSS px and a physical pixel (A.K.A devicePixelRatio) is equal to the OS display scaling factor.
This is done in order to adapt to various screen resolutions and their distance to the observer. In my screen, the image in the codepen you sent is 600x600 physical pixels, because my screen is high PPI. I would have difficulty seeing text rendered with the default size in pixels.
If you really need to set the dimensions in physical pixels, you can just divide each dimension by `devicePixelRatio, but that creates accessibility concerns.
I worked it out in the end. In jQuery you can add the following to make your website display as intended:
$(document).ready(function(){
checkBrowserDpi();
}
function checkBrowserDpi(){
if(window.devicePixelRatio == 1.25 ) {
$("header, section, footer").removeClass("zoom100");
$("header, section, footer").addClass("zoom080");
} else {
$("header, section, footer").removeClass("zoom080");
$("header, section, footer").addClass("zoom100");
}
}
$(window).on('resize', function(){
checkBrowserDpi();
});
and then have two classes in your CSS file as follows:
.zoom100 { zoom: 100%; }
.zoom080 { zoom: 80%; }
In this particular case, it checks the device pixel ratio when the document is loaded and every time the window is resized and then sets the correct zoom to the header, section tags and footer for desktop browsers. You set the zoom to any tag you wish.
** EDIT **
As #D.Pardal points out this does create accessibility issues which I had not taken into consideration. That said, if you do want to mess with the devicePixelRatio then the method above works.
In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x.
Does 500w mean that the width of the image is 500 pixels? If so, why is it w and not px, as used when in the size attribute?
Does 1x means a pixel density of 72pixels/inch
Why does an image have pixel density? I thought pixel density means the number of pixels within a physical length/space. For example, the number of pixels per inch. But a digital image doesn't occupy a physical length/space, it only occupies a number of pixels. So what does the pixel density of a digital image mean?...This is my guess, please tell me if I'm right: An image only occupies a number of pixels, but it could have been intended for a physical length. For example, an image of a button of 144 pixels width was intended to occupy a physical space of 1 inch. Therefore, it was intended for a device of 2x. We tell the browser this by specifying 2x in the srcset attribute. To sum up, the pixel density means the pixel density of the system the image is intended for.
#1. The 'w' value that appears to the right of each file listed in the srcset attribute of the <img> tag is known as the "w descriptor." The value of each 'w' descriptor is the intrinsic width, in pixels, of the file the 'w' descriptor is associated with. "Intrinsic width" means the native width of the image when it is was originally created or the last time its width changed. You can view a file's intrinsic width in Photoshop or the Windows 10 Photo Viewer (click the three-dot menu "..." and select File Info). "px" is not used to describe intrinsic width because it is used to describe various other types of image widths. The 'w' descriptor describes a specific type of image width that is measured in pixels - intrinsic width - and is used only with the srcset attribute of the <img> tag.
#2. "1x" does NOT mean a pixel density of 72 pixels per inch. That's because pixel density is NOT device resolution. Pixel density is the ratio of browser image width in pixels (known as "CSS pixels") to the native pixel width of the device's display screen. Pixel density has nothing to do with device resolution.
#3. An image does NOT have pixel density. It has only two types of width measurements - both in pixels. One width measure is the width the browser is displaying the image at. The other width measure is the intrinsic width of the image (see #1). For example, suppose I have an image whose intrinsic width is 800px wide. Also suppose that the browser is displaying the image at 650px wide. These two measures are not related in any way (this is NOT pixel density!) - they're just two different ways an image can be viewed which results in two different width measurements.
I've answered your questions directly, without any other context or explanation, and I'm certain that you are scratching your head saying, "That didn't help!" That's the exact same reaction I had when I first started to educate myself about how inline images (images that are specified with the <img> tag in HTML) are selected and displayed by browsers. I suggest you read this post to begin to gain a thorough understanding about how inline images are specified in HTML markup and how browsers select the appropriate image from the srcset attribute of the <img> tag. You can expect several weeks of study before this topic comes into sharp focus. And when you've finished mastering inline images, background images are waiting for you to master with a completely different set of rules. :>)
I am using the following two methods for a responsive website.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
CSS
img {
max-width:100%;
}
However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?
Thats what the viewport meta tag does. the HTML attribute:
content="width=device-width"
Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML
<script>
var el = document.createElement('h2');
el.textContent = window.innerWidth;
document.body.appendChild(el);
</script>
If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.
Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.