Why do we often set media queries at 500px or smaller when most phones have screens larger than that?

When it comes to designing websites, media queries are commonly used to ensure a responsive design that adapts well to different devices. However, I've noticed that many of these media queries use min-width with relatively small values like 768px or 920px.

It has made me question how effective this approach is in terms of making websites mobile-friendly, especially considering the high resolutions found on modern smartphones like the iPhone X (2436 x 1125 pixels). With some phone resolutions rivaling or surpassing those of certain monitors, do media queries become redundant? Shouldn't websites look similar on both phones and monitors in this case? What aspect am I overlooking here?

htmlcssresponsive-designmedia-queriesresponsive

Answer №1

When it comes to pixels in web design, CSS pixels are the standard rather than physical pixels. According to MDN:

A CSS pixel (denoted by px) is a unit of length that represents the size of a single dot visible to the human eye without causing strain but as small as possible.

With the 

<meta name='viewport' content='width=device-width'>
declaration on a website, the number of CSS pixels you see is actually smaller compared to the device's resolution.

For instance, on an iPhone, you might only see around 376px in width and 635px in height, even though the phone's actual resolution is three times greater, resulting in a device pixel ratio of 3.

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

Use CSS to create boxes of a specific size within a table cell that spans the entire height

I'm having trouble using CSS to create two boxes (one red and one green) inside a table cell. I can't seem to make them fill the entire height of the cell. Here is what I have tried so far: td { background-color: lightblue; padding: 5px; ...

css

What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...

javascriptcssnext.jshttp-headerscontent-security-policy

What is the best method for creating a distinctive identifier in HTML and jQuery?

Coding in HTML: @foreach($permission->childs as $subMenu) <tr> <td>{{$subMenu -> id}}</td> <td> &nbsp; &nbsp;{{$subMenu -> display_name}}</td> <td ...

htmljquery

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

What is preventing me from successfully transferring data to a different HTML page?

While I understand that there are numerous questions related to this topic, I believe my situation is unique. I am attempting to transfer form data from one HTML file (test.html) to another HTML file (tut1.html). Essentially, my goal is to extract the dat ...

javascripthtmlcss

django url not returning any data

Running a website using Python and Django has been quite the journey. I've implemented all the necessary changes to make it work smoothly. urls.py: urlpatterns = [ url('index.html', views.index, name='index'), url('admin/&ap ...

pythonhtmldjango

What is the process for altering the background color in this html5up template?

I am struggling to change the brown background color on my website. Despite updating various color values in the CSS file such as'backgroundcolor', I seem unable to make any changes. I have tried altering multiple color entries, but nothing seems ...

htmlcssbackground

Opening multiple dialogs in Jquery Dialog box

I have several images displayed on a single page. When each image is clicked, I want a dialog box to open. I currently have 6 instances of this setup in my HTML. However, when I click on an image, all 6 dialogs pop up with the same information as the first ...

javascriptjqueryhtml

The transformation of my Activity Class into an XML document

Last night, I finished working on my app for a school project before going to bed. However, I didn't build it because I planned on making some changes in the morning. When my classmates asked for help with their project, I opened Android Studio only t ...

javascriptjavaandroidhtmlarrays

Is there a CSS Blend Mode alternative for Internet Explorer?

I've implemented the background-blend-mode on this element: <a href="#" class="blend"> <h3>Title</h3> <p>Content goes here</p> </a> It's all set up with a background-image url. When the element with c ...

javascriptjqueryhtmlcssinternet-explorer

Incorporate validation features within a jQuery method

I am struggling with some HTML and jQuery code that generates links based on user input. HTML <input type="text" id="text" placeholder="Enter text" autofocus /> <a id="link1" class="btn btn-info" href="#" target="_blank"> Search 1 </a> ...

javascriptjqueryhtmlvalidationip-address

Vanishing message when clicked in PHP

I created a code to display error messages and success messages based on user input, allowing them to click anywhere on the screen to dismiss the message. The issue I am facing is that when the user receives both a success and an error message simultaneo ...

javascriptphphtml

Javascript - accessing a local file (located in the same directory as the HTML file, not an uploaded file)

I have been attempting to find a solution, but have had no success. Is there a way to read a file using JavaScript or HTML? I have a text file named "sample.txt" with some information in it. This file is located in the same folder as the HTML file that con ...

javascripthtml

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

css

Tips for parsing information from a text file and displaying it on a website in table format

Would like to create a 2x4 table where the first column has a dropdown for selection. Upon choosing an option, the associated data will populate the other 3 columns. I'm new to this, so please bear with me. Using x, y, z as placeholders, the data wil ...

javascripthtmlcssdropdown

How can I locate the CSS selector for a text message?

Looking for a CSS selector to target the message "Congratulations! displayed after successfully filling out a registration form with Selenium Web driver. Need to assert the text "Congratulations, Your email has been verified". Here is the HTML code: <d ...

cssseleniumselenium-webdriver

Utilizing the value selected in a form to trigger an action method without the use of a query

I am currently utilizing pug to generate pages for my nodeJS server. In this particular case, I am attempting to use the value selected in a form select option to dynamically change the action method. Essentially, the goal is to utilize the group name sel ...

htmlnode.jsformspug

differences in the way web pages are displayed in Microsoft Edge and Internet Explorer when compared to

I can't wrap my head around the issue I'm currently facing: it seems that MS Edge and Internet Explorer display things at a similar size to other browsers only when the user's zoom level is set to 150% (not 100%). Am I the only one experien ...

htmlcssinternet-explorermicrosoft-edge

Tips for adjusting the size of a dropdown arrow icon

Is there a way to adjust the size of the drop-down icon using CSS? If not, I am looking to replace it with an image button. Thank you! <select> <option value="age">18</option> <option value="age"& ...

htmlcss

How can you check the varying font renderings on your phone?

https://i.sstatic.net/z7HcQ.png https://i.sstatic.net/1tH5d.png Having some trouble with the font display on my website. Currently using: font-family: 'Fredoka One', cursive; It's working well on PCs and desktops, but when viewed on a pho ...

htmlcss