Hyperspaces instagram4/5/2023 ![]() If you look at the iPhone series all of their devices say the width of the screen in CSS pixels is 320px even though we know this is not true. With the introduction of double DPI devices, mobile phone manufacturers didn't want mobile pages to appear 50% smaller so they introduced a concept called devicePixelRatio (first on mobile webkit I believe), this lets them keep 1 CSS pixel to be roughly 1/96th of an inch but let you understand that your assets such as images might need to be twice the size. When you defined a viewport though you could get this device to match 1 CSS pixel = 1 real pixel at 163dpi.īy using a viewport where the width is "device-width" frees you up from having to set the width of the viewport on a per device basis to the optimal CSS pixel size, the browser just does it for you. This essentially zoomed the page out 3x (iphone was originally 320px) so 1 CSS pixel is 1/3rd of a physical pixel. ![]() The viewport was defined to be 960px wide. This was created to enable full desktop style applications to render on a small screen. The iPhone Safari browser was the first (to my knowledge) to introduce the concept of a viewport. This is a bad situation for the web and apps, so most operating systems devised many ways to abstract pixel values in to device independent units (DIPS on Android, PT on iOS and the CSS Pixel on the web). In this case the DPI of the screen is actually 2x (twice the resolution horizontally but in the same physical space). The browser does this mainly for legacy reasons - most monitors were 96dpi when the web was born - but also for consistency, in the "old days" a 22px button on a 15 inch screen at 800圆00 would be twice the size of a 22px button on a 15 inch monitor at 1600x1200. ![]() In 0.26mm of space we might have very many real device pixels. For reading at arm's length, 1px thusĬorresponds to about 0.26 mm (1/96 inch). For a nominal arm's length of 28 inches, the visual angle is The reference pixel is the visual angle of one pixel on a device withĪ pixel density of 96dpi and a distance from the reader of an arm's A CSS pixel is not a real pixel, rather a unit that is deemed to be 1/96th of an inch based on the viewing angle of the device. The web and all browsers define 1px as a unit called a CSS pixel. ![]() This is a pretty long and complex story, so forgive me. You can't really get the real physical dimensions or the actual DPI and even if you could, you can't do anything with them. This is all about a javascript (or css) solution inside the browser, not a solution for a native app. I would like to explore the existence of a simple solution by constraining things to only Chrome on Android. Others relate to webkit whereas Chrome blink may have superseded webkit in chrome (?). Some prior answers by the way are arcane (year 2011 and the like) in assuming a certain pixel density that prevailed at that time, and therefore useless. ![]() It seems there is no convergence between html api standardization and actual browser implementations in that, not to mention the browser implementation relies on OS api's which in turn rely on hardware providing the right information. There are numerous dead-end questions on stackoverflow about getting the actual physical screen dimensions of a device from within javascript (or css). Is there a safe way to get the actually correct screen physical dimensions in Chrome, on Android? If necessary, old versions of Chrome and Android can be left out of scope. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |