iphone/ipad前端开发技巧

Posted 2020-08-04 黑白红尘

iPad开发的局限性

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

iPad用户侦测：User Agent(用户代理)

随着移动设备上网的普及，很多网站都会进行客户端浏览器类型侦测，主要是靠User Agent来进行识别，如果侦测到是手机浏览则可能重定向，让用户浏览移动设备专用版本。以往我们所指的移动设备，主要是手机等终端，现在，iPad也加入到移动终端设备的行列中来，但它拥有9.7″大屏幕，iPad的Safari浏览器带来接近PC电脑的浏览感受。所以对应iPad的网站页面必须不同于其他移动设备,区别iPad访问主要也要依靠其浏览器的User Agent来进行。

iPhone OS 3.2 SDK beta 3中描述的iPad Safari浏览器User Agent代码：

?

1	Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

iPad Safari的User Agent代码包含单词：”Mobile”、”iPad”，不包含单词：”iPhone”。这点必须要留意，如果网站以前的版本对移动设备的访问并未区分，那么现在需要修改下，以防止对相应设备返回错误的版本。

模拟iPad浏览器访问的方式

如果你无法通过iPad或iPhone模拟器测试网页情况，你还是能够通过一下方式进行测试：

1. 通过Mac OS X 或 Windows版本的Safari浏览器充当模拟器Safari菜单->偏好设置->高级->选中 在菜单栏显示”开发菜单”，这是在菜单栏就会出现”开发”这个菜单项菜单”开发”->用户代理->其他，在弹出的对话框中粘贴上述User Agent代码，点击确定以后，就可以用Safari验证页面是否适合iPad显示了。
2. 用谷歌浏览器充当模拟器命令行下输入:
   ?

   1	chrome.exe --user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"

3. javascript侦测iPad的User Agent，然后转向到对应版本的URL。
   ?

   1 2 3 4 5

   if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {    if (document.cookie.indexOf("iphone_redirect=false") == -1) {       window.location =" http://ipad.www.opensoce.com";    } }

4. php脚本侦测User Agent
   ?

   1 2 3 4

   if(strstr($_SERVER[\'HTTP_USER_AGENT\'],\'iPhone\') ||strstr($_SERVER[\'HTTP_USER_AGENT\'],\'iPad\')) { header(\'Location: http://ipad.www.opensoce.com\'); exit(); }

5. Apache侦测转向
   ?

   1 2 3 4

   RewriteCond %{HTTP_USER_AGENT} ^iPad 　　RewriteRule ^index\\..*$ ipad.html [L] 　　RewriteCond %{HTTP_USER_AGENT} ^iPhone 　　RewriteRule ^index\\..*$ iphone.html [L]

6. nginx侦测转向
   ?

   1 2 3 4 5 6

   if ($http_user_agent ~*iPad ) {    proxy_pass  http://ipad.www.opensoce.com; } if ($http_user_agent ~*iPhone ) {    proxy_pass  http://iphone.www.opensoce.com; }

使用W3C标准网站技术

iPad和iPhone的Safari浏览器不支持插件以及Flash。

使用插件技术(控件)的菜单、导航等在iPad或iPhone的浏览器下将不会显示。

使用插件植入的音频、视频也不会播放, 可以 HTML5的＆lt;audio>和<video>标签发布音频视频内容。详细可参考Safari DOM中的HTMLMediaElement、HTMLVideoElement、HTMLAudioElement开发信息.

以往，你可能需要插件去表现动画内容，而在iPad和iPhone浏览器下可以直接采用Javascript+CSS3的特性去制作动画。CSS3开始朝着模块化的方向发展，比如盒子模型、列表模块、背景和边框等等。利用CSS3，你可以直接做出圆角表格，之前可是只能用图片或者VML技术才能实现。

关于HTML5和CSS3，目前在国内比较早和成功的应用是网易三大邮箱((mail.163.com; mail.126.com ;www.yeah.net)，你在iPad上输入上述地址的时候，会被转向到iPad适应版本，用户感受很好。HTML5在规范性和速度上拥有诸多优势，据网易提供的数据显示，这个版本的使用中收信写信的速度提升50%。此外，还有一个优势在于，代码量减少大大提高邮箱服务器的处理运行效率，为日后的功能扩展提供一个更强有力的平台。

HTML5/CSS3的未来和目标是为了改善每个人的网络体验。HTML5/CSS3的一点简介：

?

1 2 3 4

* 使用CSS3渐变，字体阴影，圆盒以边界–这些对菜单栏和简单的网站设计师特别实用的。 * 如果你想显示视频，使用HTML5 视频播放器代替Flash(显然它就不能工作）。 * 使用HTML5创建离线程序并且脱机存储数据。 * 各种实用的教程到处都有，当在开发我的iPad网络程序时我就已经利用了它们。Google他们，得到创意。

利用普通电脑的Safari测试无插件支持情况，在偏好设置->安全->，取消启用插件的选择框，

设置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);

模拟:hover伪类

因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

Code:

var myLinks = document.getElementsByTagName(\'a\');

for(var i = 0; i < myLinks.length; i++){

myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);

myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);

}

然后用CSS增加hover效果：

Code:

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

iphone fixed positioning

Code:

关于漂浮定位，测试后发现 { position: fixed; } 不能为其用，
可以改为 { position:absolute; } 来实现，可以使用iphone看下DEMO：iphone-fixed-positioning

Touch Events 
iPhone 是使用触屏的方式，所以就需要有手触屏和离开的时候的事件机制，幸好，iPhone做好了这方面的工作，提供了四个处理touch的事 件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch) 。

Gestures 
即是指两只手指接触屏幕的时候缩放或者旋转的效果，对于侦听gestures，iPhone也有三个事件：gesturestart，gestureend，gesturechange。
同时事件参数event有两个属性：scale，rotate。Scale的中间值是1，大于1表示放大，小于1表示缩小。

参考资料：

iPhone CSS—tips for building iPhone websites

iPhone & iPod Detection Using Javascript

iPhone Development: 12 Tips To Get You Started

Tutorial: Building a website for the iPhone

hover pseudoclass for the iPhone

fixed-positioning-on-mobile-safari

Preparing Your Web Content for iPad

原文链接：http://www.cnblogs.com/radom/archive/2012/03/01/2376436.html

摘自大公爵ddamy.com