Member Avatar for momonq1990

Heres my code

<link rel="stylesheet" media="screen and (max-width: 568px)" href="mobcss.css" />

(target media is iphone5)

It is possible to add “webkit-min-device-pixel-ration:2 or min-resolution:2dppx” in my link element as in linecode?
and how it is?

  • 3 Contributors
  • 2 Replies
  • 185 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by shophiarajan47

Dani AI

Generated

Short answer: yes — the media attribute on a <link> uses the same media-query syntax as @media, so resolution features can be included (standard min-resolution: 2dppx or DPI equivalents, plus vendor-prefixed WebKit queries). The original post has a few typos (e.g., styleshet, webkit-min-device-pixel-ration) — the correct names are rel="stylesheet" and -webkit-min-device-pixel-ratio. Example (loads only on narrow, high‑DPR screens):

<link rel="stylesheet" href="mob-retina.css"
  media="only screen and (max-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
         only screen and (max-width: 568px) and (min-resolution: 2dppx)" />

This uses a vendor fallback plus the standard feature so different engines can match appropriately. (developer.mozilla.org)

Prefer keeping responsive/resolution rules inside CSS rather than relying on many separate link files (echoing and ). A single stylesheet with an @media block is simpler to maintain and works the same way:

@media only screen and (max-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
       only screen and (max-width: 568px) and (min-resolution: 2dppx) {
  /* Hi‑DPI / iPhone‑5 specific styles here */
}

Using comma-separated media queries gives a clean fallback for engines that only understand the prefixed form. (devdoc.net)

For images and art-direction, modern best practice is to use srcset / <picture> so the browser picks the right resolution asset (instead of swapping images via CSS). For example, supply 2x candidates with srcset. (developer.mozilla.org)

Quick troubleshooting: correct the spelling of rel="stylesheet", test DPR with console.log(window.devicePixelRatio) or Chrome DevTools device emulation, and prefer srcset/picture for image assets rather than many device‑specific CSS files. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for dany12

A normal <link rel="styleshet" type="text/css" href="your_mobile.css"/>

The responsive part of your css goes in your css file.

Don't add your responsive rules as atributes to your html link tag, it will only cause trouble with older browsers and unexpected errors
Hope this helps.

Member Avatar for shophiarajan47

Why you are using the way it need not to.

If you want just for iphone then have a diffrent css style for it and make it visible when the website run on device. Better idea is to used @media css in a responsive way as suggested by dany12.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.