logo标签列表

iPhone 4移动Web应用像素缩放问题

cssmobileiphone
4
我在我的iPhone 4上无法正确地渲染我的移动Web应用程序。根据维基百科，iPhone 4具有960宽x 680高像素，其他iPhone大约为480宽x 340像素。
使用当前版本，图像和CSS样式在iPhone 4上看起来非常小。
以下是我的代码：
<!DOCTYPE html>
<html>
<head>
    <title>mobile</title>
    <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
     <link rel='stylesheet' href='highRes.css' media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
    <![endif]-->
</head>
<body>
    <div class="nav">
        <div id="threeButtons">
            <div class="navButton" id="friends">
                Friends
            </div>
            <div class="navButton" id="nearby">
                Nearby
            </div>
            <div class="navButton" id="me">
                Me
            </div>
        </div>
        <div id="settingsButton">
        </div>
    </div>
</body>
 </html>

以下是我的CSS代码：

body {
background-color: #ddd; /* Background color */
color: #222;            /* Foreground color used for text */
font-family: "Lucida Grand"; 
font-size: 14px;
margin: 0;              /* Amount of negative space around the outside of the body */
padding: 0;             /* Amount of negative space around the inside of the body */
display: block;

}

div.nav {
    text-shadow: 0px 1px 0px #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, 
                                       from(#e1f7ff), to(#a1d2ed));
    height: 50px;
}

    #threeButtons {
        float: left;
        margin-left: 20px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
        div.navButton {
            float: left;
            height: 30px;
            font-weight: bold;
            text-align: center;
            color: white;
            text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
            line-height: 28px;
            border-width: 0 8px 0 8px;
            -webkit-border-image: url(images/button.png) 0 8 0 8;

        }

    #settingsButton {
        float: left;
        background-image: url('images/settings.png');
        height: 30px;
        width: 29px;
        margin: 10px 0 5px 60px;
    }

有人能解释一下如何为iPhone 4构建应用程序吗？我应该使用这些媒体参数来引用CSS：

<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
     <link rel='stylesheet' href='highRes.css' media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' />

我应该在CSS中硬编码正文像素宽度吗？

我刚刚查看了这篇文章：http://menacingcloud.com/?c=highPixelDensityDisplays

但我想听听其他人都做了什么。

1个回答
2

尝试使用这个<meta>标签

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接