Cordova iOS模拟器仅显示320像素（我的内容为640像素）

Question

nothing found in the www about my problem. 在www中找不到关于我的问题的任何信息。 I have a content of 640px filled with divs and images. 我的640px内容充满了div和图片。 If i run my app on the iPhone Simulator now, it only shows 320px and cuts the half of the content. 如果我现在在iPhone Simulator上运行我的应用程序，它将仅显示320px并削减一半内容。

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 这里是我的样式表的链接（我希望这样可以吗？！） 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模拟器仅显示320像素（我的内容为640像素）

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-06-03 17:09:30

Cordova iOS模拟器仅显示320像素（我的内容为640像素）

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-06-03 17:09:30

解决方案1
0 已采纳 2014-06-03 17:09:30