现在的位置: 首页 > 综合 > 正文

iPad网页开发教程及规则

2012年09月20日 ⁄ 综合 ⁄ 共 1597字 ⁄ 字号 评论关闭
  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 if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {
    2    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
    3       window.location = "http://ipad.www.opensoce.com";

    抱歉!评论已关闭.