Question

我已经整合了适用于iPhone的媒体查询。

我遇到了从摩托罗拉手机查看我的网站的问题。我不确定原因是什么。或者，如果我需要在我的代码中添加额外的东西以适应除iPhone以外的其他手机设备。我有相同的媒体查询设置320px和425px ...所以所有的单元设备应该没问题。

www.lewisdesigns.com。它在iPhone上没有问题。这就是为什么我难以理解为什么其他移动设备会出现问题。

＆＃13;

.box {
position:absolute;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
left:0;right:0;
width: 380px;
padding: 10px;
}

@media (max-width : 320px) {
.box  { width: 240px;
  margin-top: 15px;
}
}

@media (max-width : 425px) {
.box  { width: 240px;
  margin-top: 15px;
}
}
 .nav-pills {

  position: relative;
  margin-top:265px;
display:table;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.nav-pills li a {
  color: black;
  border-radius: 10px;
  margin: 3px;
  font-size: 15px;
  font-weight: 589px;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills li a:hover {
color: white;
background-color: transparent;
display:inline-block;
border: 1px white solid;
font-weight: 300;
}
@media (max-width : 320px) {
.nav-pills  { width: 280px;
  margin-top: 190px;
  margin-bottom: 5px;
}
}
@media (max-width : 425px) {
.nav-pills  { width: 280px;
  margin-top: 210px;
  margin-bottom: 20px;
}
}

@media (max-width : 320px) {
.nav-pills li a { font-size:12px;
  padding: 8px;
  margin:2px;
}
}
@media (max-width : 425px) {
.nav-pills li a { font-size:12px;
  padding: 8px;
  margin:2px;
}
}




.box h2 {
  
font:  70px/1.2 'Pacifico', Helvetica, sans-serif;
 color: white;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);
padding-right: 5px;
padding-left: 5px;
margin-left: 15px;
}


 .box span {
  margin-left: 70px;
 }

@media (max-width : 320px) {
.box h2 { font:  50px/1.2 'Pacifico', Helvetica, sans-serif;
}
}
@media (max-width : 320px) {
.box span { margin-left: 40px;
}
}

@media (max-width : 425px) {
.box h2 { font:  50px/1.2 'Pacifico', Helvetica, sans-serif;
}
}
@media (max-width : 425px) {
.box span { margin-left: 40px;
}
}

＆＃13;

<html>
<head>
<body>
<div class="header" id="header">
<div class="container">
	<div class="box">	
	<h2>Lewis <br><span>Designs</span></h2>
	</div>
	<div class="menu">
	<ul class="nav nav-pills"> 
	<li><a href="./about.html">About</a></li> 
	<li><a href="./consultation.html">Consultations</a></li> 
	<li><a href="./gallery.html">Gallery</a></li> 
	<li><a href="./contact.html">Contact</a></li> 
	</ul>
</div>	
</div>
</div>
  </body>
</head>
</html>

＆＃13;

媒体查询无法使用摩托罗拉手机

0 个答案: