Question

我对移动设计非常陌生，所以如果这是一个愚蠢的问题，请原谅。

我使用Chrome来模拟iPhone屏幕。我在Chrome中一切正常，然后当我在iPhone上尝试时，标题（下面的代码中的.name-win）a）不是我期望的大小，而b）正在改变滚动的大小。

这是我现在的代码

@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;
}

}

Answer 1

你测试的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)">

iPhone4的百分比？

1 个答案: