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

Question

在www中找不到关于我的问题的任何信息。 我的640px内容充满了div和图片。 如果我现在在iPhone Simulator上运行我的应用程序，它将仅显示320px并削减一半内容。

这是我的标题：

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

这里是我的样式表的链接（我希望这样可以吗？！） http://pastebin.com/1CDxMLHW

希望你能告诉我，我做错了！

Answer 1

问题是模拟器不是真正的视网膜，它取决于您自己的屏幕。 我已经重现了问题，并通过使您的布局流畅来解决了问题。 所有元素的宽度均以百分比定义。 这样，它们可以适应可用的屏幕宽度。

/*########################
# 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