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

Question

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

这是我在 jfiddle 上的代码点击这里

这是我的外部样式表

@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>

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

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

我的颜色、字体、图片和部分格式在 PC 中的渲染与在 Mac 中完全不同。我试图让它们不会以不同的方式呈现

（取自您问题的评论）

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

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

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

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

2 回答 2

Related

Reference