Web應用程序視口問題

Question

請檢查屏幕截圖，它在ipad上可以正常工作，但在iphone / iphone4上卻不能。 我在頁面上需要的CSS /視口設置完全適合窗口內部（無滾動）。

ipad屏幕截圖 在此處輸入圖片說明

iphone4屏幕截圖 在此處輸入圖片說明

iPhone屏幕快照 在此處輸入圖片說明

這是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的情況下，這將是“寬度：320像素；”

您必須更改這些元素的定位技術，因為具有固定負邊距的絕對定位將不再起作用。 您可以嘗試將'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 個解決方案

解決方案1
0 已采納 2011-03-09 15:37:04

Web應用程序視口問題

問題描述

1 個解決方案

解決方案1 0 已采納 2011-03-09 15:37:04

解決方案1
0 已采納 2011-03-09 15:37:04