iPhone 4 移动网络应用像素缩放问题
Posted
技术标签:
【中文标题】iPhone 4 移动网络应用像素缩放问题【英文标题】：iPhone 4 mobile web app pixel scaling issues 【发布时间】：2010-08-10 23:31:26 【问题描述】：我无法让我的移动网络应用程序在我的 iPhone 4 上正确呈现。根据 Wikipedia，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】：试试这个<meta>标签
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
【讨论】：
以上是关于iPhone 4 移动网络应用像素缩放问题的主要内容，如果未能解决你的问题，请参考以下文章
如何在应用程序上设置自动缩放（针对 iPhone 6 的 4.7 英寸屏幕进行了优化）以适应 iPhone 5 和 4 的屏幕？