проблема области просмотра веб-приложения - PullRequest
Новая
       3

проблема области просмотра веб-приложения

0 голосов
/ 09 марта 2011

Пожалуйста, проверьте скриншоты, он работает нормально в ipad, но не в iphone / iphone4.Какие настройки css / viewport мне нужны, чтобы страница точно помещалась внутри окна (без прокрутки).

снимок экрана 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
    }
}

1 Ответ

0 голосов
/ 09 марта 2011

В css установите ширину # start-btns и #logo в процентах.Затем измените ширину тела в зависимости от используемого вами устройства (то есть в медиа-запросах).В случае iphone это будет «ширина: 320 пикселей;»

Вам придется изменить технику позиционирования этих элементов, поскольку абсолютное позиционирование с фиксированными отрицательными полями больше не будет работать.Вы можете попробовать поставить 'text-align: center;'на теле с 'запасом: 0 авто;'на # 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;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...