IPone 前端注意事项。

文件尽量不要大于25K

    因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重 要。

设置viewpoint和屏幕等宽

如果不设置viewpoint，网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站，这一条很有用，而且很简单，只需要插入到head里就可以：

Code:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

使用iPhone规格图标

如果你的用户将你的网站添加到home screen，iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：

Code:

 <rel="apple-touch-icon" href="images/youricon.png"/>

阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust是webkit的私有css：

Code:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

侦测设备旋转方向

iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css：

Code:

window.onload = function initialLoad() {updateOrientation();}    

function updateOrientation(){ 

var contentType = “show_”; 

switch(window.orientation){ 

case 0: 

contentType += “normal”; 

break;   

case -90: 

contentType += “right”; 

break; 

case 90: 

contentType += “left”; 

break; 

case 180: 

contentType += “flipped”; 

break; 

} 

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType); 

}

iPhone才识别的CSS

如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。

Code:

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

CSS3媒体查询

对于CSS3的媒体（media）查询，iPhone和iPad是不同的。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。

iPhone是通过屏幕最大宽度来侦测的。是这样：

Code:

 

而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样：

Code:

 

之后只要将不同的样式分别定义出来就可以了。

缩小图片

网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。

Code:

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

img{max-width:100%;height:auto;} 

}

注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

默认隐藏工具栏

iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。

Code:

 window.addEventListener('load',function(){
setTimeout(scrollTo,0,0,1);
},false);