Screen DPI
from 'Ruler Images'
Screen DPI
|
|
|
INTRODUCTION : Since the introduction of 'smart phones' with web browsers (circa 2005), there has been a lot of conversion of web pages to display nicely on 'small screen devices' (with screen oriented in 'portrait' or 'landscape' mode) --- as well as displaying nicely on 'large screen devices' (with screens usually fixed in 'landscape' mode). Even now (2018), more than a decade later, the 'big three' web development languages --- HTML and JavaScript and CSS = Cascading Style Sheets --- are in sad shape as far as providing a simple, straight-forward way of querying the dimensions and orientation of DEVICES --- or the dimensions and orientation of a browser WINDOW (or VIEWPORT) on those devices. For example, to determine an appropriate font-size to use on a device --- from pocket-sized-phones through desktop-computer-monitors to stadium-sized-scoreboards --- it would be nice to be able to query the dimensions of the device --- BOTH in pixels (or display dots) AND in units such as inches or centimeters. If one could query the PPI (pixels per inch) or DPI (dots per inch) of the device as well as device width and height in pixels or dots, that would serve as an alternative. The device dimensions in inches or centimeters could easily be calculated from those properties. The sad situation is that one can query device size in pixels --- but not device dimensions in inches or centimeters --- AND not device 'display quality' in DPI or PPI. The web page developer can query DOM (= Document Object Model) properties --- such as 'document.body.clientWidth' --- or BOM (= Browser Object Model) properties --- such as 'window.outerWidth' --- to get device or window dimensions in pixels. But, in 2018, there is no standardized method of getting device screen size in inches or centimeters ---- AND no standardized method of getting the DPI or PPI of a device. There are no such methods that work across all web browsers and all devices. In fact, even getting device or window or viewport sizes in PIXELS is not standardized yet (in 2018) across all web browsers. In most cases, you get 'virtual pixels', NOT 'real pixels'. To get some idea of the current state of these issues, you can try a web search on 'strings' such as: For now, this page is intended to provide some 'ruler images' --- horizontal and vertical --- that can be used to determine the number of pixels across a 'small screen device'. Then, by measuring the width or height of the device in inches, you can determine the 'display quality' of the device in terms of DPI or PPI. Below are four 'ruler' images --- two are 800 pixels long (one horizontal, another vertical) --- and two are 1600 pixels long (horizontal and vertical).
'Ruler' display considerations: Some web browsers on 'small screen devices' may shrink these images so they fit within an area in the body of this web page. I want these images to appear 'actual size' --- not shrunken --- in other words, not with eliminated pixels. I want the images either CLIPPED OFF at the 'small device' screen (or window or viewport) boundaries --- or SCROLLABLE. I do not want the browser to do unwanted image resizing. I do not seem to have accomplished this yet on the 'Samsung Internet' browser that I am targeting/testing on a Samsung 'J3' smart phone. There seems to be some image 'inflating' and then 'squashing'.
Explanation: So, clearly, the browser is somehow showing about 980-'virtual'-pixels across a 720-REAL-pixels screen. The Javascript QUERY RESULTS page shows that the document object 'document.body.clientWidth' is 980 pixels --- even though the Samsung J3 phone is only 720 'real' pixels wide! I have read someplace that some (most? all?) smartphone web browsers render a page in an expanded 'virtual' space of about 1400 pixels (or more) and then shrinks that 'virtual'-page down (both text and images, apparently) to around half that size. That seems to be what is happening with the 'Samsung Internet' web browser on the Samsung J3 smartphone.
Bottom-line: I have put a 'div' HTML container around the 1600-pixel horizontal-ruler image, and I use the style 'overflow-x:scroll' --- so that I can scroll the horizontal ruler left and right --- to position the markings where I want them. The horizontal scroll works in both Hopefully, these 'rulers' will work in other 'smartphone' and 'desktop' web browsers, in their respective environments (devices, operating systems, etc.). |
|
The Markings on the Ruler images: The white lines on the black backgrounds are 10 pixels apart. And you can see labels at every 100 pixels from one side of each image.
NOTE: The DPI Issue: Personally, I want to use these ruler images to determine the pixel-dimensions and image quality (DPI) of my smart phone --- in the x and y directions. Unfortunately, as the discussion above shows, I have been able to use these 'rulers' to measure screen width in 'virtual-pixels' but not in 'real-pixels'. All this nonsense would go away if there were standards that supported a TRUE DPI query (or a TRUE width-in-inches-or-centimeters query) that could be used to properly (and easily) set appropriate font sizes. The relatively new 'calc' feature in CSS could be used to calculate appropriate font-sizes over a HUGE range of screen sizes, if the DPI or width-in-inches-or-centimeters, as well as the TRUE screen width in REAL pixels, were available to CSS.
Some DOM/BOM queries on pixel dimensions do not return actual pixels but something called CSS-pixels. It seems that the CSS governing bodies are inventing more and more constructs without solving the basic problems. They seem to be making things harder and more confusing than aiming for simplicity and enlightenment. One problem is that different browsers implement these constructs in different ways --- which is not surprising since the logic gets complicated in dealing with the wide variety of page layouts that are possible. Another problem is that web browser developers implement stuff like automatic 'text inflation' and image-resizing as the default action on 'small screen devices', which causes many web developers to spend days and weeks learning how to turn that stuff off --- because it is not working nicely with their particular web page layout. 'Text inflation' and auto-image-resizing should be 'opt-in' --- not 'opt-out'. They cause more problems than they solve. We need I may provide some links here, someday, that illustrate some of the issues related to font-sizing in web pages. For now, I will simply say that CSS is in a SAD-SAD state in relation to supporting a wide variety of device sizes (and orientations) --- and DOM/BOM objects are lacking in the area of supporting queries on DPI or 'physical size' of devices, where 'physical size' is referring to units of distance measure (such as inches or centimeters). Hopefully, by the year 2025, the situation will be much better --- across all web browsers and essentially all devices --- by settling on HTML-JavaScript-CSS (and DOM-BOM) standards that vastly simplify the current confusing, cluttered, unsettled, half-deprecated mess. (It's amazing that the current cobbled-together language-soup works as well as it does. That said, there are plenty of 'new-age' web pages out there that do not work well on one device or another. Don't look at the underlying code; it's scary. For most 'mobile-friendly' (so-called 'responsive design') pages, their code looks like a patch-work --- an overwhelming assembly of patches. This is a 'far cry' from the early-days of relatively simple HTML.) |
|
Bottom of the page
To return to a previously visited web page location, use the
Back button of your web browser a sufficient number of times.
OR, use the History-list option of your web browser.
< Go to Top of Page, above. >
|