日志搜索
用户登录
用户公告
时间记忆
最新日志
最新回复
最新留言
最新访客
加入群组
我的好友
我的照片
iPad 网页开发教程及规则
[ 作者:Shortway 日期:2015-6-15 12:25:00 ]

iPad 网页开发教程及规则

    http://justcoding.iteye.com/blog/1175572

【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 代码:

    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. 用谷歌浏览器充当模拟器

    命令行下输入 :

    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。

    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

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

    5.Apache 侦测转向

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

    6.Nginx 侦测转向

    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、使用 CSS3 渐变,字体阴影,圆盒以边界–这些对菜单栏和简单的网站设计师特别实用的。

    2、如果你想显示视频,使用 HTML5 视频播放器代替 Flash( 显然它就不能工作)。

    3、使用 HTML5 创建离线程序并且脱机存储数据。

    4、各种实用的教程到处都有,当在开发我的 iPad 网络程序时我就已经利用了它们。Google 他们,得到创意。

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

【设置 viewpoint】

    viewpoint,可以理解为:视窗、可视区域,相对于 iPad 硬件限定的窗口来定义的。iPad 窗口大小不可改变 , 但 viewpoint 视窗大小可以设置调整。

    如果在 iPhone 开发中指定了视窗标签设置 , 在 iPad 开发中必须进行必要的校正。例如:

    在 iPhone 中,我们会用下述代码的方式指定屏幕宽度

    <meta name="viewport" content="width=320" /><!-- 不适应 iPad-->

    而在 iPad 中,则必须用 device-width 替代具体的宽度像素数。

    <meta name="viewport" content="width=device-width" /><!-- 适应 iPad-->

    我们在设置宽度的同时可以设置可缩放的比例范围

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

【触摸式交互】

    外接硬件键盘仅是作为 iPad 的选件,触屏式键盘才是 iPad 主要的交互工具。用户点击文本框的时候,软键盘会自动弹出,例如用户点击 <input type=”text”> 或 <textarea> 等的时候。

    iPhone、iPad 用户主要是通过手指与网页进行交互。这种交互方式的缺陷是无法处理类似鼠标停留的事件,所以,在网页中的鼠标事件:mousemove、mouseover、mouseout 或 CSS 代码的 :hover 达不到 PC 机浏览器中的表现效果 .

    单手指触摸事件 (Touch Events):在 iPhone、iPad 浏览器中可处理的单手指 DOM 触摸事件:touchstart、touchmove、touchend、touchcancel(when the system cancels the touch) 。在输入框按住一会会弹出剪切 / 复制 / 粘贴窗口 , 可在网页通过 -webkit-user-select: none 代码禁用该功能 .

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

【模拟 :hover 伪类】

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

    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 效果:

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

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

【用 textareas 取代 contenteditable】

    iPhone 和 iPad 浏览器不支持 contenteditable 元素。

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

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

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

【侦测设备旋转方向】

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

    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/iPad 才识别的 CSS】

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

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

【CSS3 媒体查询】

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

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

    <link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" />
    <link rel="stylesheet" media="screen and (min-width: 321px)" href="/landscape.css" />

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

    <link rel="stylesheet" media="screen and (orientation:portrait)"  href="portrait.css" />
    <link rel="stylesheet" media="screen and (orientation:landscape)" href="/landscape.css" />
    <!-- 注意:如果两种样式表有显著地区别的话,这会分散用户注意力,所以这并不是必须要的组件。-->

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

【缩小图片】

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

    @media screen and (max-device-width: 480px){
       img{max-width:100%;height:auto;}
    }

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

【默认隐藏工具栏】

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

    <script type="application/x-javascript">
       addEventListener("load", function()
       {
          setTimeout(hideAddressbar, 0);
       }, false);
       function hideAddressbar()
       {
          window.scrollTo(0, 1);
       }
    </script>

【iPad 图标】

    iPad 开发完成后,会体现图标的地方主要有:

    1、iPad 桌面,不大于 72×72 的 png 格式图标;iPhone 桌面,不大于 57×57 的 png 格式图标,在 Xcode 中的资源部分添加,并在 xxxInfo.plist 中设置 Icon file 属性为添加的图片资源名称。图标文件不需要做圆角和反光,iPad/iPhone 自己会完成。

    2、App Store 中软件简介中显示的缩略图,在打包生成 zip 文件的根目录放置的文件名为 iTunesArtwork 的 jpg 图片,大小要求在 512×512 以下

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

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

【用 iScroll 控制你的触摸滚动】

    这是一个简单且最有用的源码,能够帮助你控制你的网络应用程序。由 Matteo Spinelli 创作,iScorll 是一个开发项目,因为网络浏览器引擎 Webkit 工具套件(用于 iPhone, iPod, iPad, Android 以及 Palm 上)不提供本地方式去滚动文章内部一个固定的高度 / 宽度元素。

    这种不幸的情况防止任何 Web 应用程序有一个头和 / 或页脚的 position:absolute CSS 属性,并滚动中心区域的内容。

    iScroll 代码非常易于使用。如果你喜欢 iScroll,你需要这些类似的 jQuery 插件:jQuery Swipe 和 JQTouch。

【iPad 本机应用程序】

    1、本机应用程序运行更快:使用更多的 iPad 的资源和性能。

    2、不需要在网络上搜索:在苹果商店上一站式购买。

    3、用户感觉更加舒适:他们知道程序是为他们设备特别制作的,不适合用 HTML5/CSS3。

    4、更容易打开和关闭:程序在打开和关闭的时候没有任何中断且不会丢失数据。

    5、更难于开发:要求 Objective-C 和 Apple SDK 的知识。

    6、封闭的平台:很难为其他设备进行修改比如 Android 平台。

【iPad 网络应用程序】

    1、新兴的编码标准:HTML5,CSS3,JavaScript 正在为网络带来令人惊奇的客户端功能;特别是本地 / 离线存储功能。

    2、站点可以对任何浏览器进行定制:根据你的用户所操作的设备或浏览器切换样式表或重定向网页都。它可以使您的应用程序具有通用性。

    3、开发简单:使用 HTML,CSS 和 JavaScript 创建 iPad 网络应用程序代替学习新语言。这些技能你应该已经具备了。

    4、史蒂夫·乔布斯不能审查你的网络程序:网络是一个开放平台——意味着你皆在自己的掌控之中,不需要等待苹果商店的批准通过。

    5、小众的市场,没有足够的支持:网络应用程序需要众多的力量,不仅需要吸引用户也需要开发者参与。

【免费开源开发工具】

    http://www.appcelerator.com/

    来源:http://www.opensoce.com/?p=1153

发表评论:
Powered by Oblog.