Question

请查看截图，它在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
    }
}

Answer 1

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

您必须更改这些元素的定位技术，因为具有固定负边距的绝对定位将不再起作用。你可以尝试把'text-align：center;'身体上有'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;
    }
}

Web应用程序视口问题

1 个答案: