1. 首頁
  2. 問答
  3. 目標操作系統與CSS黑客？

目標操作系統與CSS黑客？

2013-07-12 75 views
-1

我正在尋找針對OS的CSS黑客。到目前爲止，基本上我發現的所有東西都是針對瀏覽器（主要是IE）和瀏覽器引擎，但是我試圖擺脫的所有大規模樣式變化似乎都會在PC中彈出，而不管瀏覽器/瀏覽器引擎如何。如果你有任何建議，爲什麼會發生這種情況，以及關於我應該瞄準什麼以及如何去做的任何想法，請幫忙。目標操作系統與CSS黑客？

這是我在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:[email protected]ocialadventuring.com" style="font-size: inherit;"> [email protected] </a>. 
    </p> 

</article> 

</div> 

</body> 

</html>

之一的一個例子，我試過this了，但couldn」讓它工作，也許它已經過時了？如果我能夠實現它，基本上就是我所需要的。

來源

2013-07-12 user2552562

+0

你究竟想要做什麼？ –

+0

我的顏色，字體，圖片和我的格式部分在PC中呈現的效果與在Mac中完全不同。我試圖讓他們不呈現不同的笑loll – user2552562

+0

http://stackoverflow.com/questions/3910859/operating-sytem-detection-for-css-hacks-aka-need-a-pc-only-css-hack我可能會將其標記爲複製品，但看起來所選答案已過時。 – epascarello

回答

1

實際上沒有辦法來檢測與CSS技巧OS，

但是下面可能對你有所幫助。

它的基本思想是檢測操作系統和瀏覽器，並將它們添加 如類body標籤，然後寫圍繞這些 類特定的CSS。

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

來源

2013-07-12 06:25:17 defau1t

+0

這聽起來正是我需要的，謝謝兄弟。我到底在哪裏粘貼那段js代碼？我是否將它作爲.js文件保存在我的目錄中？ – user2552562

0

我的顏色，字體，圖片和我的格式化的部分呈現真正 不同的方式在PC比在Mac。我試圖讓他們不要渲染 不同

這並不是針對特定瀏覽器或操作系統一個很好的做法（從你的問題的意見採取的）。測試瀏覽器是否支持X和Y更明智，如果不支持，則提供替代方案。

診斷瀏覽器中字體支持的方法並不多，但有一種方法（例如）將字體應用於元素，然後測試其寬度以查看它是否與您期望的相符。

顏色和圖像，你真的不能做太多。這歸結於用戶的喜好，監控質量，這種事情。我建議你儘可能提供高質量的圖像，如果用戶設置不良，那麼他們需要升級它。

來源

2013-07-12 07:03:04 Jared

相關問題

 相關問題