文章/答案/技术大牛

发布

社区首页 >问答首页 >使用引导程序无法使iPhone景观的媒体查询正常工作

问使用引导程序无法使iPhone景观的媒体查询正常工作
EN

Stack Overflow用户

提问于 2014-04-19 11:19:40

回答 1查看 1.1K关注 0票数 0

我在这个站点上使用了引导；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

回答 1

Stack Overflow用户

发布于 2014-04-19 15:33:16

试试这个：CSS媒体查询不同设备和屏幕尺寸

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23169353

复制

相似问题

问使用引导程序无法使iPhone景观的媒体查询正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用引导程序无法使iPhone景观的媒体查询正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用引导程序无法使iPhone景观的媒体查询正常工作
EN