使用 CSS hack 的目标操作系统？

【问题标题】：Target OS with CSS hacks?使用 CSS hack 的目标操作系统？
【发布时间】：2013-07-12 05:39:43
【问题描述】：

我正在寻找针对操作系统的 CSS hack。到目前为止，基本上我发现的所有内容都是针对浏览器（主要是 IE）和浏览器引擎，但无论浏览器/浏览器引擎如何，我试图摆脱的所有大规模样式更改似乎都出现在 PC 中。如果您对为什么会发生这种情况有任何建议，以及关于我应该针对什么以及如何做到这一点的任何想法，请提供帮助。

这是我在 jfiddle 上的代码 click here

这是我的外部样式表

@media (min-width: 1260px) {


header { font-family: 'sofia_pro_lightregular'; color: white; border-bottom: solid white 4px; opacity:0.6; }
body {
    background-color: #CECDB3;
    padding: 5px;
    margin: 2px;
}

.wrapper {
    font-family:Verdana, Geneva, sans-serif; }
.mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left;
 }
 .navtext { padding-left: 10px; padding-top:15px; }
article { background-size:countain; }

.livecoaching { position: relative; right: -20%; }
.seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670;}
.contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }

.rightcontent {
    float: right;
    width: 40%;
    position: relative;
    right: -150px;
    background-color: #6A6A00;
    -moz-border-radius-topright: 20px;
    -webkit-border-radius-topright: 20px;
    border-top-right-radius: 20px;
}
.leftcontent { float:left; width: 60%; position: relative; bottom: -1em; }


.clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}

.coachingintro { position: relative; right: 0.2em; font-family: 'CaviarDreamsRegular'; font-size:1.5em; text-align:center; font-weight: 400; }
form {
    background: url(images/nightclub.png) no-repeat;
    background-size: cover;
    font-size: 0.8em;
    font-family: Verdana, Geneva, sans-serif;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    overflow: auto;
    position: relative;
}



h3:first-letter { font-family: 'KaushanScriptRegular'; font-size: 50px; }
h3 { font-family: 'sofia_pro_lightregular'; }



 article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:Helvetica; }

 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; margin-bottom: 100px; font-size: 1.5em;  }

.homepage {text-align: center; }

}

@media (min-width: 320px) and (max-width: 479px) {
    header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.3em; }
html, body {
    background-color: #CECDB3;
    height: 95%;
    width: 100%;
}

.wrapper {
    background-color: #CBB82C; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:92%; height:95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 30%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }
a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.7em;  }
article { font-size:0.5em; background-size: contain; position: relative; }


}

@media (min-width: 480px) and (max-width: 599px) {
    header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; }

html, body {
    background-color: #CECDB3;
    width: 100%;
    height:100%;
    overflow: hidden;
}

.wrapper {
    background-color: #CBB82C; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:92%; height: 90%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 30%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }
 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.7em;  }
article { font-size:0.6em;  position: relative; }

}

@media (min-width: 768px) and (max-width: 1258px) {

html, body { width:100%; height:1500px;}
header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; }
body {
    background-color: #CECDB3;

}

.wrapper {
    background-color: #CBB82C; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:95%; height: 95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 13%; height: 20%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }

 .navtext { padding-bottom: 15px; }
 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.9em;  }
article { font-size:0.8em;  position: relative; }


}
@font-face {
    font-family: 'sofia_pro_lightregular';
    src: url('SofiaProLight-webfont.eot');
    src: url('SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProLight-webfont.woff') format('woff'),
         url('SofiaProLight-webfont.ttf') format('truetype'),
         url('SofiaProLight-webfont.svg#sofia_pro_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_slab500';
    src: url('Museo_Slab_500_2-webfont.eot');
    src: url('Museo_Slab_500_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('Museo_Slab_500_2-webfont.woff') format('woff'),
         url('Museo_Slab_500_2-webfont.ttf') format('truetype'),
         url('Museo_Slab_500_2-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'KaushanScriptRegular';
    src: url('KaushanScript-Regular-webfont.eot');
    src: url('KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('KaushanScript-Regular-webfont.woff') format('woff'),
         url('KaushanScript-Regular-webfont.ttf') format('truetype'),
         url('KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams-webfont.woff') format('woff'),
         url('CaviarDreams-webfont.ttf') format('truetype'),
         url('CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsBold';
    src: url('Caviar_Dreams_Bold-webfont.eot');
    src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
         url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
         url('Caviar_Dreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsItalic';
    src: url('CaviarDreams_Italic-webfont.eot');
    src: url('CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_Italic-webfont.woff') format('woff'),
         url('CaviarDreams_Italic-webfont.ttf') format('truetype'),
         url('CaviarDreams_Italic-webfont.svg#CaviarDreamsItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsBoldItalic';
    src: url('CaviarDreams_BoldItalic-webfont.eot');
    src: url('CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_BoldItalic-webfont.woff') format('woff'),
         url('CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
         url('CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DJGrossNormal';
    src: url('DJGROSS-webfont.eot');
    src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
         url('DJGROSS-webfont.woff') format('woff'),
         url('DJGROSS-webfont.ttf') format('truetype'),
         url('DJGROSS-webfont.svg#DJGrossNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

这是我的一个页面的示例

<!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<title> SocialAdventuring.com </title>
<link href="CSS/socialpolarities.css" rel="stylesheet" type="text/css" />
</head>

<body>

<header>
        <h1> Lifestyle Design, Personal Exploration & Dating </h1>
    </header>

<div class="wrapper">

    <nav class="mainnav">
        <div class="navtext">
        <a href="index.html"> HOME </a> <br/>
        <a href="aboutUs.html"> ABOUT US </a> <br/>
        <a href="contact.html"> CONTACT US </a> <br/>
        <a href="coaching.html"> COACHING </a> <br/>
        <a href="seminars.html"> SEMINARS </a> <br/>
        <a href="blog.html">  BLOG </a> <br/>
        </div>
    </nav>

<article class="contact">
    <p> If you have any questions about Social Adventuring, our products, our servives or are interested in collaborating with us please contact us at <a href="mailto:info@socialadventuring.com" style="font-size: inherit;"> info@socialadventuring.com </a>.
    </p>

 </article>

 </div>

 </body>

 </html>

我尝试了this，但无法让它工作，也许它已经过时了？如果我能让它工作，它基本上就是我所需要的。

【问题讨论】：

  • 你到底想做什么？
  • 我的颜色、字体、图片和部分格式在 PC 中的渲染与在 Mac 中完全不同。我试图让它们不会呈现不同的效果，哈哈
  • stackoverflow.com/questions/3910859/… 我会将其标记为骗子，但看起来所选答案已过时。
  • 另外，我已经在 Mac 上的 Chrome 和 PC 上的 Chrome 上对此进行了测试（无论如何，它应该呈现类似于 Safari，因为它们使用相同的布局引擎）。伽马显示也不是问题，因为我在我的 Mac 上调整了它，但仍然有差异，不知道在 PC 上是什么。
  • @epascarello，谢谢哥们，但那个 CSS 浏览器选择器正是我尝试过的那个 :(。我认为它已经过时了，如果有人能让它工作或知道它可以工作，我会大量放心

标签： javascript css html cross-browser


【解决方案1】：

实际上没有办法使用 CSS 技巧来检测操作系统，

但以下内容可能对您有所帮助。

其背后的基本思想是检测操作系统和浏览器并添加它们 作为body标签的类，然后围绕这些写特定的css 类。

http://www.stevensacks.net/2013/02/17/detecting-operating-system-and-browser-with-css/

【讨论】：

  • 这听起来正是我需要的，谢谢老兄。我究竟应该在哪里粘贴那块 js 代码？我是否将它作为 .js 文件保存在我的目录中？
【解决方案2】：

我的颜色、字体、图片和我的部分格式渲染真的 在 PC 中与在 Mac 中不同。我试图让它们不渲染 不一样

（取自您问题的cmets）

针对特定浏览器或操作系统不是一个好习惯。更明智的做法是测试浏览器是否支持 X 和 Y，如果不支持，请提供替代方案。

在浏览器中诊断对字体的支持的方法并不多，但一种方法（例如）是将字体应用于元素，然后测试其宽度以查看它是否符合您的预期。

您无能为力的颜色和图像。它归结为用户偏好、监控质量等。我建议您尽最大努力提供高质量的图像，如果用户设置不佳，则需要对其进行升级。

【讨论】：

    猜你喜欢
    • 2013-02-09
    • 2011-04-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-27
    • 1970-01-01
    • 2013-03-22
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode