Is There a CSS Media Query to Detect Windows

Is there a CSS media query to detect Windows?

there is no property to specify OS used to view webpage, but you can detect it with javascript, here is some example for detecting Operating system :

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

console.log('Your OS: '+OSName);

got it?, now you can play with document.write to write download stylesheet for specific Operating system. :)

another example, i assumed that you are using jquery.

if (navigator.appVersion.indexOf("Win")!=-1) 
{
  $(body).css('background','#333');
} else {
  $(body).css('background','#000'); // this will style body for other OS (Linux/Mac)
}

Identify Browser and OS with CSS?

Sadly I dont believe it possible with just pure css for each system.

However you can use combination of css and js to see system.

See here: http://rafael.adm.br/css_browser_selector/

CSS Media Queries as Browser Resizes?

You don't need JS for MediaQueries to work or to detect the screen size/view port. Also, you do not need to refresh your browser for the result of a MediaQuery to take place.

Take a look at this article for detailed information and 'How to' for using MediaQueries:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Probably the easiest way to achieve this is to supply separate MediaQueries in the head of your HTML:

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" />

You can also use MediaQueries within your main stylesheet:

@media screen and (max-width: 350px) {  /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */
   .content{
       padding:6px;
   }
}

I would highly recommended taking the time to read through the above article to get a better understanding of MediaQueries. Once you understand how to best use them, you will find them invaluable!

css media query that targets firefox pc only

Css hack for firefox

@-moz-document url-prefix() { 
  .cssSelector {
     font-size: 14px;
  }
}

Reference

Detect if a browser in a mobile device (iOS/Android phone/tablet) is used

Update (June 2016): I now try to support touch and mouse input on every resolution, since the device landscape is slowly blurring the lines between what things are and aren't touch devices. iPad Pros are touch-only with the resolution of a 13" laptop. Windows laptops now frequently come with touch screens.

Other similar SO answers (see other answer on this question) might have different ways to try to figure out what sort of device the user is using, but none of them are fool-proof. I encourage you to check those answers out if you absolutely need to try to determine the device.

---

iPhones, for one, ignore the handheld query (Source). And I wouldn't be surprised if other smartphones do, too, for similar reasons.

The current best way that I use to detect a mobile device is to know its width and use the corresponding media query to catch it. That link there lists some popular ones. A quick Google search would yield you any others you might need, I'm sure.

For more iPhone-specific ones (such as Retina display), check out that first link I posted.

Media Query detection on windows mobile

I think this is because you have only min-width defined.
if you are searching for min-width:320px - this query is met always - even you have bigger resolution.
Try something like

if (window.matchMedia("(min-width: 320px) and (max-width: 767)").matches) {
    alert("width 320"); // works
}//one px less then the query in next statement

---

Related Topics