【发布时间】：2014-04-19 23:33:16
【问题描述】：
我在这个网站上使用引导程序； 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>
感谢您的帮助， 格雷格
【问题讨论】：
标签： ios css twitter-bootstrap media-queries