GVKun编程网logo

是否有CSS媒体查询来检测Windows？（css 媒体查询）

19

本篇文章给大家谈谈是否有CSS媒体查询来检测Windows？，以及css媒体查询的知识点，同时本文还将给你拓展c#–检测Windows重新启动是否是由Windows更新引起的、css–使用媒体查询来控

本篇文章给大家谈谈是否有CSS媒体查询来检测Windows？，以及css 媒体查询的知识点，同时本文还将给你拓展c# – 检测Windows重新启动是否是由Windows更新引起的、css – 使用媒体查询来控制图像下载、css – 是否可以在媒体查询中嵌套媒体查询？、css3 – CSS媒体查询最小宽度无法正常工作等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

是否有CSS媒体查询来检测Windows？（css 媒体查询）

是否有CSS媒体查询来检测Windows？（css 媒体查询）

我想指定两种略有不同的背景颜色，一种用于Mac OS，一种用于Windows。

答案1

小编典典

没有用于指定用于查看网页的操作系统的属性，但是您可以使用javascript进行检测，这是一些用于检测操作系统的示例：

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);

知道了吗？，现在您可以document.write编写特定操作系统的下载样式表了。:)

另一个示例，我假设您正在使用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)}

c# – 检测Windows重新启动是否是由Windows更新引起的

c# – 检测Windows重新启动是否是由Windows更新引起的

我的电脑上的一些应用程序一直在进行检测,而 Windows Update是否重启.这是可观察的,因为它们在自动Windows Update重新启动后重新启动.

这非常有用,因为这些应用程序会重新加载更改,甚至是未保存的更改或还原选项卡(如果是浏览器).执行此操作的应用程序示例：

>谷歌浏览器
> Microsoft Visual Studio
> Microsoft Paint

在所有情况下,应用程序都会保存重启前的状态.

(我的PC实际上是从待机状态自动唤醒,并在安装更新时重新启动.太糟糕了,这样做后它没有回到待机状态.)

我的问题是：我如何以编程方式检测这种重启？在重启之前似乎可以可靠地检测到.

问题How can I get the Windows last reboot reason似乎是重复的,但没有回答任何关于更新的说法.

我用C#编写代码,所以C#中的答案会有所帮助,但我也可以阅读C和C.

解决方法

见 Application Restart：

An application can use Application Recovery and Restart (ARR) to save data and state information before the application exits due to an unhandled exception or when the application stops responding

和：

or if the computer needs to restart as the result of an update.

事实之后,应用程序没有检测到重启原因 – 它们已被架构为使用此API.没有(据我所知)这是一个托管API.

点击几下就是Saving data and application state when application is being closed due to a software update.再次,没有托管API.

css – 使用媒体查询来控制图像下载

css – 使用媒体查询来控制图像下载

如果我创建一个容器并想要根据媒体查询设置背景图像,为什么浏览器(Firefox,Chrome)会下载中等大小的图像(如果已经下载了大图像)？这似乎完全违背了这一点(即节省带宽).

HTML

<div id="background"></div>

CSS

#background {
    width: 100%;
    height: 400px;
    background-image: url(/content/images/2016/04/airport-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 500px) {
  #background {
    background: url(/content/images/2016/04/airport-medium.jpg);
  }
}
@media (min-width: 800px) {
  #background {
    background: url(/content/images/2016/04/airport-large.jpg);
  }
}

如果我加载页面,浏览器会在此设置中下载-large.jpg.如果我调整屏幕大小(低于800px),浏览器会下载并呈现-medium.jpg,依此类推.

我怎么能阻止这个？

解决方法

我认为这里冲突的主要原因是你假设媒体查询是为了节省带宽而实施的.它们被实现为以不同的尺寸显示不同的东西,就是这样.您选择以不同大小显示相同图像的事实只是您决定如何使用它们,而媒体查询只是忠实地执行他们一直承诺的事情：向用户显示您告诉它的内容以向用户显示.

我建议评估这是否真的值得投入时间和代码(请记住,大多数用户不会调整窗口大小或旋转移动设备,而那些可能不会被闪存推迟的人 – 和重载).如果您决定这样做,它将不仅仅通过CSS.您最好的选择是研究JavaScript方法来执行此操作,例如向body标签onload添加一个加载大的类,然后为较小的图像编写CSS规则,仅在body标签没有class =’loaded-时加载大’.

希望这可以帮助.

css – 是否可以在媒体查询中嵌套媒体查询？

css – 是否可以在媒体查询中嵌套媒体查询？

这可能吗？这似乎是一个整洁的解决方案，但我不知道它是否会有效。 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

    /* Code for both portrait and landscape */

    @media (orientation:portrait) {

        /* Code for just portrait */

    }

    @media (orientation:landscape) {

        /* Code for just landscape */

    }

}

解决方法

您应该能够使用 nest @media rules this way in CSS3，但大多数浏览器尚未支持。详见 this answer。

您将不得不完全展开和重复顶级媒体查询内部规则，以便它可以在浏览器之间工作(我想像，SCSS处理器会产生类似的东西)：

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
    /* Code for both portrait and landscape */
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {

    /* Code for just portrait */

}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) {

    /* Code for just landscape */

}

css3 – CSS媒体查询最小宽度无法正常工作

css3 – CSS媒体查询最小宽度无法正常工作

我有一个像这样的 HTML： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Code: NewYork</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

我的CSS是：

input {
  background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    input {
        background-color: green;
    } 
}

现在,当窗口宽度为909像素时,CSS适用.显然不是滚动条问题.我对这个简单的问题感到困惑.我用Chrome和IE10测试它们都是一样的.

任何人都可以帮助我在这里做错了吗？

解决方法

我用过这个HTML： 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Code: NewYork</title>
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

使用像这样的简单媒体查询声明：

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

它在这里工作得很好：http://jsbin.com/ubehoy/1

使用Firefox Responsive Design View进行调试并拖动缩放器,它会在达到宽度限制时正确更改输入背景颜色.

尝试使用Chrome 26.0.1410.64 m / IE 10,它的工作也很棒.

关于是否有CSS媒体查询来检测Windows？和css 媒体查询的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于c# – 检测Windows重新启动是否是由Windows更新引起的、css – 使用媒体查询来控制图像下载、css – 是否可以在媒体查询中嵌套媒体查询？、css3 – CSS媒体查询最小宽度无法正常工作等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇如何在计算中直接使用Pandas日期时间索引？（pandas 日期索引）

下一篇使用LD_LIBRARY_PATH时与Anaconda链接的问题（ld_library_path 不起作用）

相关文章