iphone/ipad前端开发技巧

iPad开发的局限性

    1、在iPad上使用Safari浏览普通网站网页的时候，网页因为太大而导致需要手动放大缩小或者滑动，虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道，但时间久了我们还是会发现这样做并不方便，给用户带来的感受并不十分好。
    2、不支持Flash,在没有越狱的iPad Safari中，网站的Flash都是无法显示的，但可以通过第三方软件或插件或者浏览器来解决，不过，即使不能显示Flash，你一样能够用HTML5和CSS3实现同样的效果。
    3、没有鼠标光标,这意味着鼠标属性，例如鼠标悬停属性是不可能有的。
    4、你或许可以为这个找到一些变通的办法，但是到你的用户那里这些该如何工作将会是困难的事。
    滚动条不能按照预期那样起作用,滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外，滚动过程中需要两个手指的手势。（我们将在下文中进行充分的讨论）
    5、不支持CSS固定布局,HTML 元素 position:fixed CSS属性不能正确显示，常常会使得页面停留在第一屏，无法向下翻页、放大缩小。

开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。

Code:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

if (document.cookie.indexOf("iphone_redirect=false") == -1) {

window.location = "http://www.8mart.cn";

}

}

虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：

Code:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {

header('Location: http://www.8mart.cn/iphone');

exit();

}

设置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像素，如果用前面的代码限制了缩放