iPhone 4移动网络应用像素缩放问题 [英] iPhone 4 mobile web app pixel scaling issues
问题描述
我无法让我的移动网络应用在我的iPhone 4上正常呈现。根据维基百科，iPhone 4有960宽x 680高像素，其他iPhone有480宽x 340像素。
对于我目前的构建，iPhone 4上的图片和CSS样式看起来真的很小。
我的代码：
<！DOCTYPE html&
< html>
< head>
< title> mobile< / title>
< link rel =stylesheettype =text / csshref =iphone.cssmedia =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-比率：2）'/>
<！ - [if IE]>
< link rel =stylesheettype =text / csshref =explorer.cssmedia =all/>
<！[endif] - >
< / head>
< body>
< div class =nav>
< div id =threeButtons>
< div class =navButtonid =friends>
朋友
< / div>
< div class =navButtonid =nearby>
附近
< / div>
< div class =navButtonid =me>
Me
< / div>
< / div>
< div id =settingsButton>
< / div>
< / div>
< / body>
< / html>
这里是我的CSS：
body {
background-color：#ddd; / *背景颜色* /
颜色：＃222; / *用于文本的前景色* /
font-family：Lucida Grand;
font-size：14px;
margin：0; / *身体外侧的负空间量* /
padding：0; / *主体内部的负空间量* /
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 =stylesheettype =text / css href =iphone.cssmedia =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-比率：2）'/>
还是应该在CSS中硬编码身体像素宽度？
我刚刚签出了这篇文章： http://menacingcloud.com/?c=highPixelDensityDisplays
但我想听听别人的演讲。 div>
尝试此< meta> 标记
; meta name =viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0;>
I'm having trouble getting my mobile web app to render properly on my iPhone 4. According to Wikipedia, the iPhone 4 has 960 width x 680 height pixels and the other iPhones have something like 480 width x 340 pixels.
With my current build, the images and CSS styling look really tiny on the iPhone 4.
Here is my code:
<!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>
And here is my 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;
}
Does anyone have an explanation on how to build for the iphone 4? Should I use these media parameters to reference the 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)' />
or should I hardcode the body pixel width in the CSS?
I just checked out this article: http://menacingcloud.com/?c=highPixelDensityDisplays
but I want to hear what other people have done.
Try this <meta> tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
这篇关于iPhone 4移动网络应用像素缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
