使用bootstrap无法让我的媒体查询iPhone版景观正常工作

时间:2014-04-19 11:19:40

标签: ios css twitter-bootstrap media-queries

我在这个网站上使用bootstrap; http://toothimplants.com/indexTest.html我的媒体查询iPhone肖像工作正常,但我无法让我的iPhone横向代码工作。我想要做的是摆脱iPhone风景的背景图像。我的目标是iPhone 4并在我的iPhone 4上进行测试。

这是我在外部CSS上的媒体查询代码。有关完整的CSS,请参阅http://toothimplants.com/screen2.css

/* ---------------- Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px)
and (orientation: portrait) {
html,
body {
height: 100%;
background-image: none;
background-repeat: no-repeat;
background-attachment:fixed;
background-color: #fffff0;
background-size: cover;
}
.iphone {
margin: 30px 0 30px 0;
padding:50px 0 0 20px;
height: 100%;
width: 400px;
background-image: url(_images/toothimplants-iphone_div-background.jpg);
background-repeat: no-repeat ;
background-size: cover;
}
h1 {font-size: 330% !important; margin-top:-90px !important; line-height:100% !important}
h3.phone { padding-left:0 !important; font-size: 150% !important;}
h3.phone-1 { width: 350px;
}
.phone-2 {
width: 360px;
}
.phone-3 {
width: 400px; padding: 10px;
}
.phone-4 {
width: 360px; margin:0 0 40px 0 !important;
}
.phone-5 {
margin:0 0 20px -15px !important;
}

/* ---------------- Smartphones (landscape) ----------- */
@media only screen 
and (min-device-width : 321px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
html,
body {
height: 100%;
background-image: none !important;
background-repeat: no-repeat;
background-attachment:fixed;
background-color: #fffff0;
background-size: cover;
} 
} 

****这是头部html; ****

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>ToothImplants.com</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Adobe Typekit -->
<script type="text/javascript" src="//use.typekit.net/hun6djw.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

感谢您的帮助, 格雷格

1 个答案:

答案 0 :(得分:0)