2013-02-05 87 views
0

我對手機設計極其陌生,所以請原諒我是否這是一個愚蠢的問題。我擁有了一切在Chrome中工作正常,然後當我試圖在iPhone上,頭(.NAME贏在下面的代碼)一)是不是我期待的大小,和b)上滾動大小的改變。iPhone4的百分比?

下面的代碼我現在所擁有的

@media (max-width:480px){ 

body{ 
background:#FFF; 
margin-top:0; 
margin-left:0; 
} 

.container{ 
position:relative; 
top:0; 
left:0; 
width:100%; 
height:100%; 
padding-left:0; 
background:#EEE; 
} 

.name-win{ 
position:fixed; 
background:#EEE; 
top:0; 
left:0; 
height:27%; 
width:100%; 
z-index:10000; 
overflow:hidden; 
padding-left:5%; 
-moz-box-shadow:-2px 0px 2px 3px rgba(200, 200, 200, 0.8); 
-webkit-box-shadow:-2px 0px 2px 3px rgba(200, 200, 200, 0.8); 
-o-box-shadow:-2px 0px 2px 3px rgba(200, 200, 200, 0.8); 
box-shadow:-2px 0px 2px 3px rgba(200, 200, 200, 0.8); 
} 

.scroll{ 
background:none; 
} 

.info-win{ 
position:relative; 
margin-top:33%; 
background:#FFFFFF; 
height:100%; 
width:100%; 
z-index:1000; 
min-height:500px; 
overflow:hidden; 
padding-bottom:20px; 
} 

.name-win h1{ 
font-family: 'Archivo Narrow', sans-serif; 
font-weight:700; 
max-width:200px; 
margin-top:1px; 
margin-left:119px; 
margin-bottom:1px; 
} 

#pic{ 
float:left; 
} 

#pic img{ 
margin-top:-32px; 
width:100px; 
border:6px solid #fff; 
} 

.res_cont{ 
width:100%; 
} 

.contact h3{ 
margin-top:1px; 
margin-left:120px; 
margin-bottom:0px; 
font-family: 'Archivo Narrow', sans-serif; 
font-weight:700; 
} 

.contact p{ 
margin-top:0px; 
font-family: 'Archivo Narrow', sans-serif; 
font-weight:300; 
margin-left:130px; 
margin-bottom:1px; 
} 

.label{ 
height:33px; 
width:420px; 
padding-left:10px; 
margin-bottom:10px; 
} 

.label h2{ 
font-family: 'Archivo Narrow', sans-serif; 
color:#fff; 
text-shadow:1px 1px #555; 
} 

.res_cont p{ 
font-family: 'Archivo Narrow', sans-serif; 
color:#555; 
margin-left:25px; 
} 

.res_cont span{ 
font-style:italic; 
color:#999; 
} 

#objective_label{ 
background-color:#4F8AFF; 
} 

#rs_label{ 
background-color:#CC0000; 
} 

#about_label{ 
background-color:#00CC66; 
} 

#education_label{ 
background-color:#FF6633; 
} 

#links_label{ 
background:#E4B434 
} 

#links_ul li{ 
font-family: 'Archivo Narrow', sans-serif; 
color:#666; 
} 

} 

回答

0

上沒有u檢驗iPhone上什麼類型的?對於IPHONE 3

嘗試添加CSS:

@media only screen and (max-device-width: 480px) { 

} 

和HTML:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"> 
+0

什麼關於iPhone 4+? –

+0

iPhone 4使用視網膜顯示裝置,它具有2-1含義的像素比1個像素實際上出現在瀏覽器2×2像素使得其分辨率,要求另一個媒體查詢: @media屏幕和(-webkit分鐘設備-pixel比:2){} –

+0

如果我取出的webkit將它的工作跨瀏覽器? –