网络应用程序视口问题

请查看屏幕截图，其工作在iPad中确定，但不在iphone/iphone4中。我需要什么CSS /视口设置的页面完全适合窗口内（无滚动）。网络应用程序视口问题

iPad的屏幕截图 enter image description here

iPhone4的屏幕截图 enter image description here

iPhone屏幕截图 enter image description here

下面是HTML代码

<!DOCTYPE html> 

<html> 
<head> 
    <title>Home</title>  
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;user-scalability:no;"> 

    <link rel="stylesheet" href="../Common/mobile.css" /> 
    <script type="text/javascript" src="../Common/jquery-1.5.min.js"></script> 

</head> 

<body> 
<div class="texture"> 
    <!-- Start of first page --> 
    <div id="eco-home-page" data-role="page" class="splash"> 
     <div data-role="content">   
      <a id="logo" href="#"><img width="100px" src="../Images/1.jpg" /></a> 
      <div id="start-btns"> 
       <a href="#"><img src="../Images/1.jpg" /></a> 
       <a href="#"><img src="../Images/1.jpg" /></a> 
       <a href="#"><img src="../Images/1.jpg" /></a> 
       <a href="#"><img src="../Images/1.jpg" /></a> 
      </div> 
     </div> 
    </div> 

</div> 

</body> 
</html>

这里是CSS代码

html {height: 100%;} 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font: 14px/16px Helvetica; 
    -webkit-text-size-adjust: none; 
    background-position: center center; 
    background-color: #d5d5d5; 
    background-image: -webkit-gradient(radial, center center, 2, center center, 750, from(#fafafa), to(#d5d5d5)); 
    background-image: -moz-radial-gradient(center center 45deg, circle closest-corner, #fafafa 0%, #d5d5d5 100%); 
} 
a img {border: none; } 
.texture { 
    background: url("../Images/texture.png") repeat scroll 0 0 transparent; 
    width: 100%; 
    min-height: 100% !important; 
    height: 100%; 
} 

.splash { 
    background: url(../Images/shapes1.png) no-repeat center center; 
    width: 100%; 
    min-height: 100% !important; 
    height: 100%; 
} 

#eco-home-page a#logo{ 
    width: 100px; 
    height: 100px; 
    left: 50%; 
    top: 50%; 
    margin-left: -50px; 
    margin-top: -400px; 
    position: absolute; 
} 
#eco-home-page #start-btns {width: 610px; height: 406px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px;} 
#eco-home-page .splash-screen a#logo {margin-top: -320px !important; } 



/*for ipad*/ 
@media all and (max-width: 600px) { 
    body { 
     // extra styles for mobile 
    } 
} 

/*for iphone/ipod*/ 
@media all and (min-width: 600px) { 
    body { 
     // extra styles for desktop 
    } 
}

来源

2011-03-09 coure2011

在CSS中设置＃start-btns和#logo的宽度为百分比。然后根据您使用的设备（即媒体查询）更改正文的宽度。在iPhone的情况下，这将是'宽度：320px;'

您必须更改这些元素的定位技巧，因为绝对定位和固定负边界将不再起作用。你可以尝试把'文字对齐：中心'在'margin：0 auto'的身体上;'在＃start-btns和#logo上。

如果不是所有宽度都是百分比（或者其他相对度量，如ems），最好将其改为大多数。这样，您只需更改媒体查询内部的主体宽度（或字体大小），您的布局就会自动更改。

下面的东西应该这样做。

html {height: 100%;} 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font: 14px/16px Helvetica; 
    -webkit-text-size-adjust: none; 
    background-position: center center; 
    background-color: #d5d5d5; 
    background-image: -webkit-gradient(radial, center center, 2, center center, 750, from(#fafafa), to(#d5d5d5)); 
    background-image: -moz-radial-gradient(center center 45deg, circle closest-corner, #fafafa 0%, #d5d5d5 100%); 
    text-align: center; 
} 
a img {border: none; } 

.texture { 
    background: url("../Images/texture.png") repeat scroll 0 0 transparent; 
    width: 100%; 
    min-height: 100% !important; 
    height: 100%; 
} 

.splash { 
    background: url(../Images/shapes1.png) no-repeat center center; 
    width: 100%; 
    min-height: 100% !important; 
    height: 100%; 
} 

#eco-home-page a#logo img { 
    margin: 6.5% auto; 
    width: 13%; 
} 

#eco-home-page #start-btns { 
    width: 80%; 
    height: auto; 
    margin: 0 auto; 
    overflow: hidden; 
} 

#eco-home-page #start-btns img { 
    float: left; 
    margin: 0.5%; 
    width: 49%; 
} 

/*for ipad*/ 
@media all and (min-device-width: 768px) and (max-device-width: 1024px) { 
    body { 
     width: 768px; 
    } 
} 

/*for iphone/ipod*/ 
@media all and (max-device-width: 480px) { 
    body { 
     width: 320px; 
    } 
}

来源

2011-03-09 15:37:04 rbginge

没有将它们转换为％不起作用... – coure2011 2011-03-09 17:36:56

％将起作用。我刚刚使用上面的代码示例进行了尝试......您还需要添加'position：relative'。到'媒体查询'中的'body'规则（或者＃start-btns的祖先之一），因为'position：absolute;'。不要忘记宽度：320px声明。 – rbginge 2011-03-09 19:02:20

媒体查询也可能需要相反。 iphone的最大宽度和ipad的最小宽度 – rbginge 2011-03-09 19:05:22

网络应用程序视口问题

回答

相关问题