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