Home/ Questions/Q 4034462
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:58:31+00:00

Please check out the screenshots, Its working ok in ipad but not in iphone/iphone4.

  • 0

Please check out the screenshots, Its working ok in ipad but not in iphone/iphone4. What css/viewport settings I need to the page exactly fits inside the window (no-scrolling).

ipad screenshot
enter image description here

iphone4 screenshot
enter image description here

iphone screenshot
enter image description here

here is the html code

<!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>

here is css code

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
    }
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the css set the widths of #start-btns and #logo as a percentage. Then change the width of the body depending on the device you’re using (i.e. in the media queries). In the iphone’s case this would be ‘width: 320px;’

    You’ll have to change the positioning technique of these elements as absolute positioning with fixed negative margins will no longer work. You could try putting ‘text-align: center;’ on the body with ‘margin: 0 auto;’ on #start-btns and #logo.

    It would be advisable to change most if not all widths to percentages (or some other relative measure such as ems). That way you only need to change the body’s width (or font size) inside the media query and your layout will automatically change.

    Something like below should do it.

    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;
    }
}
    • 0