Understanding the outcomes of CSS media queries

I'm currently grappling with CSS media queries for a mobile-centric webpage. My main objective is to maintain consistent font sizes on the page, regardless of device physical size and resolution specifications that may vary. However, I am finding that the data reported by the media queries does not always align with the actual device characteristics.

For testing purposes, I am using an HTC One M7 with a display resolution of 1080x1920 pixels and a pixel density of 467dpi, according to the manufacturer's specifications.

The exact values returned by the media queries are as follows:

width (as indicated by min-width/max-width): 1080px

resolution (as indicated by min-resolution/max-resolution): 288dpi or 3.0dppx

Firstly, shouldn't the width in pixels be represented in logical pixels rather than physical ones? For example, both the iPhone3GS and iPhone4 report a width of 320px, even though the latter actually has 640 physical pixels. This raises the question of how to interpret the term "pixel" when comparing it against specific queries.

Secondly, the reported 288dpi does not correspond to the actual device pixel density of 467dpi. How exactly is this 3dppx metric calculated?

cssmobilemedia-queriespixel

Answer №1

This question piqued my interest. I am well-versed in how media queries function on iOS devices, but my knowledge on the same for Android devices is a bit lacking. Nevertheless, I will do my best to provide an answer.

Let's delve into the concept of dppx, which refers to the number of physical dots that can fit into each pixel (commonly referred to as "physical pixels" and "logical pixels"). When we mention 3dppx, it indicates that every logical pixel on the screen comprises a 3x3 grid of physical pixels. To put it in terms familiar to iOS users, your screen possesses a @3x resolution, similar to the iPhone 6 Plus.

You can find a compilation of various device dppx values at this link:

(Although the site mentions -webkit-min-device-pixel-ratio, which precedes dppx, they essentially convey the same idea.)

If you have information regarding a device's physical width and dppx, you can utilize the subsequent formula to ascertain its logical width for media queries:

device width / dppx = logical width

For the specific device under consideration, this calculation would be:

1080 / 3 = 360

Hence, you could anticipate the following media query to encompass your device when in portrait mode:

@media only screen and (max-width: 360px) { }

In regards to the 288dpi: A device with 1dppx corresponds to 96dpi, thus resulting in 3 x 96 = 288. Although the source of the manufacturer's 467dpi figure remains unclear, it does not appear relevant when constructing media queries.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

What is causing my css elements to appear larger compared to other instances?

As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and svelte ...

csstailwind-cssdaisyui

Managing traffic in Google Kubernetes Engine (GKE)

I am encountering an issue with our website deployment on GKE, which consists of 10 pods. When deploying a new version, we use MAXsurge=1 and MAXunavailable=0. Upon trying to access the website during a new deployment, I sometimes only see the header in t ...

javascriptcsskubernetesgoogle-kubernetes-engine

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

cssresponsive-designfooter

What is the best way to expand a div in a downward direction exclusively?

My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions. Initial state of the two divs: https://i.sstatic.net/cWYyV.png Outcome after clicking on div 2: ...

javascripthtmlcss

Transitioning CSS - An elegant way to display div contents

Here's the concept: A hidden div that slides down, pushing other content, when a button is clicked. Clicking the button again will hide the div and raise the other content. HTML <div id="topDiv" class="hidden"> Some content<br> M ...

javascripthtmlcsscss-transitions

Ensuring the synchronization of mobile app data with the online backend for continuous persistence

I'm currently in the process of developing a mobile application using AngularJS and PhoneGap. The main function of the app is to provide users with access to a variety of data-items that are stored within .json files. A key feature of the app is that ...

mobileangularjspersistencelocal-storagedata-synchronization

Is there a way to create a transparent background for my website without affecting the visibility of the content such as images and text?

I'm currently working on a website for a school project, and I've run into a minor issue. I can't seem to make the background of the body transparent without affecting the content within it. Below is my HTML code: <html> <head> ...

htmlcssbackgroundopacitytransparent

Stop Sass from including property entirely

Within my current project, I have implemented a sass-mixin that looks something like this: mymixin.scss: @mixin customized_mixin($header-border-top-stack, $header-border-bottom-stack) { #some-id { border-top: $header-border-top-st ...

htmlcsssassmixins

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

Within my image-wrapper container, I have an image with a variable resolution. The container itself has fixed dimensions for height and width. My goal is to center the image within the container both horizontally and vertically while adding a box-shadow e ...

htmlcssobject-fit

What is the correlation between $container-max-width and $grid-breakpoint in Bootstrap version 4?

Query: I am working with Bootstrap v4 in a project and I am curious about the connection between the default values assigned to the keys in the $container-max-width and $grid-breakpoint SASS maps. Is there a correlation between them in Bootstrap v4? Bac ...

csstwitter-bootstrapsassgridtwitter-bootstrap-4

What is the best way to bring the global stylesheet into a Vue component?

Embarking on my first VueJS project, I decided to create a global stylesheet to maintain consistent styles across different components. After installing the SCSS loader and setting up my stylesheets, I encountered an issue. $mainFont: 'PoppinsRegular, ...

javascriptcssvue.jssassvue-component

Is there a way to restrict access to a website on Chrome using HTML code?

I'm trying to block a website on Chrome using HTML. When I try, a pop-up appears. If I click OK, the site is blocked, but if I click cancel, it continues to load. How can I resolve this issue? See below for the code and screenshot: <html& ...

htmlcss

Tips for customizing the color scheme of background, rows, row selection, and headers in Angular 4 using Bootstrap 4 data tables

I've integrated Bootstrap 4 data table in my Angular 4 project, but I'm struggling to customize row colors, row selection colors, and header colors. You can check out the example of the data table I'm using at this link: https://github.com/ ...

cssangulartypescriptbootstrap-4

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using: <!doctype html> <html lang="en> <head> <!-- Req ...

javascriptjquerycssbootstrap-4windows-7

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Having difficulties in expanding my input bar to 100% width and center aligning it

Creating a webpage in a jsp file with the help of spring boot, I've utilized bootstrap for the design. I'm facing some challenges as I'm unable to widen my input box to width:100% on both the login and new registration pages. Additionally, c ...

htmlcssspring-bootbootstrap-4

Adjust the font size within the grid layout

I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 t ...

htmlcssbootstrap-4

What could be the source of this margin or spacing?

Within this test, I have noticed that there are 2 inline flex containers. Specifically, I am referring to the test scenario that states Next The flex containers are laid out inline. Despite the fact that there is some space between the containers, upon in ...

htmlcssflexbox

`Move the Hover effect to a different element upon mouseover``

In my setup, I have the following arrangement: <div class="menuHomeCategorias Accesoriosclass"> <div class="categoryName Accesorios" name="Accesorios"> <p>Accesorios</p> </div> <img class="categoriasHome" alt="Ca ...

javascriptjqueryhtmlcss