4
내 iPhone 4에서 모바일 웹 앱을 올바르게 렌더링하는 데 문제가 있습니다. 위키 피 디아에 따르면 iPhone 4의 너비는 960 픽셀이고 높이는 680 픽셀이며 다른 iPhone은 480 폭 x 340 픽셀. 내 현재 빌드와iPhone 4 모바일 웹 앱 픽셀 크기 조정 문제
, 아이폰 여기에 4
의 이미지와 CSS 스타일링 보면 정말 작은 내 코드입니다 :
<!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;
}
아이폰 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
을하지만 다른 사람들이 무엇을했는지 듣고 싶어.