My phone has a resolution of 2280x1080. I noticed that when using the following code, the background color changes to blue on my phone:
@media (max-width: 500px) { body { background-color: blue; } }
Interestingly, this feature stops working once "computer mode" is turned on. This has been confirmed for both Chrome and Firefox preview.
From my perspective, this topic covers a wide range of information, but I'll provide an overall answer.
First and foremost, it is important to clarify that the resolution you mentioned should be 1080x2280 where the width comes first for accuracy.
Your phone's resolution is indicated in physical pixels, while CSS uses logical pixels. Logical pixels are essentially the physical pixels divided by your device DPR (Device Pixel Ratio).
For example, if you own a Samsung Galaxy S10 with a DPR of 4, the viewport of your browser will have dimensions of 360x760.
Check out this informative video on Pixel Density: Pixel Density, Demystified
To learn more about Physical Pixels vs. Logical Pixels, visit:
If your device has a width of 1080 pixels, that is considered to be the device-width, which represents the physical pixels on the screen. When the device-pixel-ratio of the device is, for instance, 3, it means that each "css pixel" equals 3x3 device pixels. In a media query, setting max-width: 500px refers to the "css pixels", so with a device-pixel-ratio of 3, this would translate to 1500 device pixels. As a result, your phone's screen size would be 760x360 (css) pixels.
The high device-pixel-ratio, such as those found in retina displays, offers the advantage of displaying vector graphics, fonts, and high-resolution images with enhanced detail and better resolution. Despite this, the pixel unit in CSS rules continues to refer to the "css pixels," explaining why your background appears blue or the media query is implemented.
You also have the option to utilize min-device-width / max-device-width in media queries. Nevertheless, in most cases, it is recommended to use max-width / min-width and consider working with "css pixels."
P.S.: The "computer mode" you mentioned likely disables or alters the settings within the viewport meta tag.
To ensure that your media queries target screens specifically, remember to include screen after the word "media." This will allow the queries to focus on more than just screen devices.
If you are working on a project where you need to set specific styles for screens with a maximum width of 500px, your code should look like this:
@media screen and (max-width: 500px){ body { background-color: blue; } }
I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...
Incorporating bootstrap 4 and material icons into my app has presented a challenge. Specifically, the issue arises when I attempt to create a button that contains both text and an icon. .button-icon { vertical-align: middle; } <button class="button ...
Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...
I recently completed a tutorial on capturing video streams from the front or rear camera of an iPhone using JavaScript. The tutorial can be found at this link. While testing the functionality on my desktop browser, everything worked perfectly. However, wh ...
I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...
After completing the layout of my website, everything seems to be functioning well. However, I would like to ensure that I haven't overcomplicated it or used poor techniques. The structure involves a main DIV with a nested table DIV, inside of which ...
My contact form with validations is functioning well, but I am facing an issue where old errors persist even after correcting them and submitting the form again. Below is a snippet of the document containing the JavaScript code: <form id="contactForm" ...
I need to implement a feature with 3 checkboxes: When the "A" checkbox is clicked, only "A" should be highlighted. Upon clicking the "C" checkbox, only "C" gets highlighted. If the "B" checkbox is clicked, both "A" and "B" nee ...
Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...
I am currently working on an HTML page and I'm having trouble displaying an image within a division element. Below is the code snippet I tried: Here is the JavaScript part of my code: var filename = "andrew.png"; $("#detected").show().html('< ...
Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...
My container is structured like this with divisions: <div class="container-fluid"> <div class="row"> <div class="col-3"> sidebar </div> <div class="col-7"> top slider </div> <di ...
Is there a secure and efficient way to determine when a bearer token has expired in my Angular application? This is the issue I am facing: If I keep the app open in my browser, someone could potentially access sensitive information on my screen since I am ...
I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side. Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me? Here is my code: ...
My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...
Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...
I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints? interface EmptyStateProps { title: string; description: string ...
I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...
I’m facing an issue with the responsive background on Android Chrome. It displays correctly on PC browsers like Safari, Firefox, and Opera, as well as in Firefox on Android. However, I am encountering a problem with Chrome on Android where it doesn’t a ...
After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...