我希望媒体只能在屏幕为1280px的safari上工作
这个工作在所有浏览器,但我只想要safari
@media screen and (width: 1280px){
}
最好的选择是使用JavaScript:
下面是尝试这种检测的代码片段
null
if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1 && screen.width=="1280px") {
console.log("True")
}else {
document.getElementById("a").display = "none"
console.log("False")
}
<html>
<head></head>
<body>
<p id="a">Safari mobile<p>
</body>
</html>
试试这个
WebKit:Chrome和; Safari(任何版本)
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;}
铬29+
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}}
狩猎(7.1+)
_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;}
Safari(从6.1到10.0)
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@media {
/* Your Class */
}}
狩猎(10.1+)
@media not all and (min-resolution:.001dpcm) {
@media {
/* Your Class */
}}
有用的链接:特定于浏览器的CSS和JavaScript黑客