Question

关于我的问题在www中找不到任何内容。我有640px的内容填充div和图像。如果我现在在iPhone模拟器上运行我的应用程序，它只显示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模拟器只显示320px（我的内容是640px）

1 个答案: