`Safari compatibility with media queries`

Check out the code in my index.html:

<html>
    <head>
        <title>My Website</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" media="screen and (max-resolution: 96dpi)" type="text/css" href="css/app_normal.css"/>
        <link rel="stylesheet" media="screen and (min-resolution: 97dpi) and (max-resolution: 192dpi)" type="text/css" href="css/app_medium.css"/>
        <link rel="stylesheet" media="screen and (min-resolution: 193dpi)" type="text/css" href="css/app_hi.css"/>

This display looks great on Chrome and Firefox, but not on Safari. Can anyone help me fix this issue?

Thank you!

htmlcssmedia-queries

Answer №1

Partial support for this feature can be found on Safari: Check here

According to caniuse.com:

Although the standard prefers min/max-resolution, certain browsers still recognize the older non-standard device-pixel-ratio media query.

Answer №2

Check out the link below for information on which browsers support media queries:

Browser Compatibility

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

Using an Image Fragment as a Background

I have a collection of images stored on a sprite sheet. My goal is to showcase a specific image from the sprite sheet as the background of my div container. The catch is, I want to ensure there is some blank space surrounding the selected image, requiring ...

htmlcss

Enhance the &:hover effect of one class to match another class's hover state using SASS or SCSS

Is there a way to link the hover effect from one class to another in CSS? I'm trying to achieve this without disrupting the individual hover effects of each class: HTML <a href="#" class="button1">Button 1</a> <a h ...

htmlcsssasshover

How can I transform a multidimensional array in PHP into a nested list in HTML?

I am working with an array that is nested and can be "endless" due to the complexity of family trees. Here is a simplified example: Array ( [id] => 121 [name] => Very Important Dogs Bowey Showey [gen] => 0 [mother] => Array ...

phphtmlarraysloopshtml-lists

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

javascriptjqueryhtml

Creating Page Breaks on the Fly with jQuery and CSS

In my HTML page, there's a form embedded in a large table that allows users to manipulate rows by deleting, moving, and adding them dynamically. For printing purposes, I want to ensure that no more than 25 rows appear on each page to maintain legibil ...

javascriptjquerycsspage-break

Unleash the power of jQuery by incorporating the Ajax functionality with a hover option to enhance user interactivity. Utilize the .ajax

On my website, I have a calendar displayed with dates like "11/29/2014" stored in an attribute called "data-date". The goal is to check the server for a log file corresponding to that date and change the CSS of the div on mouse hover. Here is the current ...

javascriptjquerycssajax

Stacking a Bootstrap column above another column

Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness? Consider this scenario with 4 columns arranged in a row: https://i.sstatic.net/qug0g.png Upon clicking the Overlay btn, the E column shoul ...

htmlcsscss-positionbootstrap-5

Navbar Collapse in Bootstrap 5 not functioning properly when losing focus

I am working on a project as a beginner where I am coding a site navbar using Bootstrap 5. The issue I am facing is that currently, the navbar does not collapse when I click away after expanding it. My goal is to make it so that the navbar automatically co ...

javascripthtmlbootstrap-5

Navigating to User's Specific Info Page using Node.js

Would love some input on my current issue. I have a table featuring a list of users, and my goal is to display user information in detail whenever a user (which corresponds to a row in the table) is clicked. The process involves identifying which user was ...

javascripthtmlnode.jsexpress

If checkboxes are found within the table's rows and cells, add the parent row class if none of the

I am attempting to implement a small script within my table under the following conditions: The table contains a checkbox within each tr td, and I want my jQuery script to be applied only if the selector identifies a tr where all td checkboxes are unchecke ...

javascriptjqueryhtmlcss

Having issues with dynamic components in Nuxt using Bootstrap 5

I've been working on integrating Bootstrap 5 into my Nuxt project. While the styles are coming through perfectly, anything that previously relied on jQuery is not functioning as expected. The steps I followed for installation: Downloaded files fr ...

javascriptcssnuxt.jsbootstrap-5

Creating a menu prior to the initiation of my trio of programs

I recently started working with three.js and I'm looking to create a menu on a page before the program actually loads using three.js. I want to be able to display options like "start" and "music control" before the game itself is fully loaded. Would ...

javascripthtmlthree.js

Trigger .gif on hover using ng-repeat in AngularJS

Many solutions to this problem involve using jQuery, such as the following examples: Stop a gif animation onload, on mouseover start the activation and Animating a gif on hover. However, I'm interested in achieving the same functionality using Angular ...

javascripthtmlangularjsanimationgif

Navigating the data returned by an AJAX call can be quite perplexing

Every time a link is clicked on the website located at , an AJAX request triggers to load the content automatically. Lately, I have been encountering a perplexing piece of code injected into my response data: <script> var _q = document.createEle ...

phpjavascripthtmlajax.htaccess

Check if the element with the ID "products" exists on the page using JQuery. If it does, then execute a certain action

Is there a way to create a conditional statement that executes if the element with the ID "products" is present in the HTML code? Thanks in advance for your help! Pseudo code using JavaScript (JQuery) if ( $('#products').length ) { // do s ...

javascriptjqueryhtmlif-statementconditional-statements

Tips for concealing elements beyond div boundaries

First and foremost, I want to mention that my focus is on studying frontend development, so I could really use some assistance with a task. I am looking to create a tab slider where the content on the left and right will flank it, ensuring the tab slider ...

htmlcsshide

The specified MIME type (text/html) is not compatible with stylesheets

When attempting to link a css file to my express-handlebars file, I encountered the following error: The style from 'http://localhost:4000/cs366/style/draft.css' was refused due to its MIME type ('text/html') not being a supported st ...

cssnode.jsexpresshandlebars.jsexpress-handlebars

Error message: Unrecognized command 'undefined' while trying to compile Sass using Sass.js within

Every time I attempt to compile Sass code using sass.js, I encounter {line: 0, message: "Unknown command undefined"} in the console. <html> <body></body> <script src="dist/sass.js"></script> <script> ...

javascriptcsssass

How to perfectly center a text box in HTML

UPDATE: I have included the relevant JavaScript code. Essentially, a text box appears when a checkbox is clicked, but I want the text box to be centered on the page. I am attempting to center align a text box on the page, but I am struggling to achieve th ...

htmlcss

The button remains active in Internet Explorer 10 and cannot be disabled

The button has been specified as <input type="button" id="disable" disabled="disabled" value="Upload" /> However, the appearance of the button does not show it as disabled in Chrome, Firefox, and Safari. Additionally, in Internet Explorer, the bu ...

javascriptjqueryhtml