Cordova iOS simulator only shows 320px (my content is 640px)

Question

nothing found in the www about my problem. I have a content of 640px filled with divs and images. If i run my app on the iPhone Simulator now, it only shows 320px and cuts the half of the content.

This is my header:

<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum- scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
var myScroll;
    function loaded () {
        myScroll = new IScroll('#wrapper', { useTransition: false });
    }
        document.addEventListener('touchmove', function (e) {  e.preventDefault(); }, false);
</script>

And here a link to my Stylesheet (i hope this is okay?!) http://pastebin.com/1CDxMLHW

Hope u can tell my, what i did wrong!

Answer 1

The problem is is that the emulator is not realy retina it depends on your own screen. I have reproduces the problem and solved the problem by making your lay out fluid. The width of all elements are defined with percentages. In this way they can adapt to the available screen width.

/*########################
# GENERAL SCROLL STYLING #
########################*/
html {
        -ms-touch-action: none;
        width: 100%;
}

li, ul{
        list-style: none;
        padding: 0;
}

body {
        overflow: hidden; /* this is important to prevent the whole page to bounce */
}

#header {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 118px;
        padding: 0;
        border-top: 18px solid #000000;
}

#footer {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #444;
        padding: 0;
        border-top: 1px solid #444;
}

#wrapper {
        position: absolute;
        z-index: 1;
        top: 45px;
        bottom: 48px;
        left: 0;
        width: 100%;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
}

#scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
}

/*########################
# GENERAL HEAD STYLING   #
########################*/

.head_first{
        background:url(../img/buttons/fb_btn.png);
        width: 30%;
        height: 100px;
        float: left;
}

.head_second{
        background:url(../img/buttons/nav_top_btn.png);
        width: 30%;
        height: 100px;
        float: left;
}

.head_third{
        background:url(../img/buttons/weather_btn.png);
        width: 30%;
        height: 100px;
        float: left;
}

#main_pic{
        background:url(../img/start/strand.jpg);
        width: 100%;
        height: 400px;
        clear: both;
        float: left;
        margin-top: 73px;
}

/*########################
# CONTENT      STYLING   #
########################*/

li{
        background:url(../img/buttons/nav_btn.png);
        background-repeat: no-repeat;
        list-style: none;
        clear: both;
        float: left;
        position: relative;
        width: 100%;
        height: 64px;
        color: #FFFFFF;
        font-size: 35px;
}

li a{
        top: 10px;
        left: 20px;
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
}

a:link{
        text-decoration: none;
        color: #FFFFFF;
}

a:hover{
        text-decoration: none;
}

a:active{
        text-decoration: none;
}

a:visited{
        text-decoration: none;
        color: #FFFFFF;
}

/*########################
# FOOTER       STYLING   #
########################*/

.footer_first{
        background:url(../img/buttons/home_btn.png);
        clear: both;
        float: left;
        width: 25%;
        height: 84px;
}

.footer_second{
        background:url(../img/buttons/news_btn.png);
        float: left;
        width: 25%;
        height: 84px;
}

.footer_third{
        background:url(../img/buttons/card_btn.png);
        float: left;
        width: 25%;
        height: 84px;
}

.footer_fourth{
        background:url(../img/buttons/faehr_btn.png);
        float: left;
        width: 25%;
        height: 84px;

}

Cordova iOS simulator only shows 320px (my content is 640px)

Question

1 answers

solution1
0 ACCPTED 2014-06-03 17:09:30

Cordova iOS simulator only shows 320px (my content is 640px)

Question

1 answers

solution1 0 ACCPTED 2014-06-03 17:09:30

solution1
0 ACCPTED 2014-06-03 17:09:30