0
我在这个网站上使用bootstrap; http://toothimplants.com/indexTest.html我的媒体查询iPhone的肖像正在工作，但我无法让我的iPhone景观代码工作。我想要做的是摆脱iPhone风景背景图像。我的目标是iPhone 4并在iPhone 4上测试它。无法让我的媒体查询为iPhone景观工作，使用引导
这是我在外部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>
感谢您的帮助， 格雷格