侦测iPhone/iPod

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

  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  2. if (document.cookie.indexOf("iphone_redirect=false") == -1) {
  3. window.location = "http://m.example.com";
  4. }
  5. }

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

  1. if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
  2. header('Location: http://yoursite.com/iphone');
  3. exit();
  4. }

设置viewpoint和屏幕等宽

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

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

使用iPhone规格图标

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

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

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

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

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

侦测设备旋转方向

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

  1. window.onload = function initialLoad() {updateOrientation();}
  2. function updateOrientation(){
  3. var contentType = “show_”;
  4. switch(window.orientation){
  5. case 0:
  6. contentType += “normal”;
  7. break;
  8. case -90:
  9. contentType += “right”;
  10. break;
  11. case 90:
  12. contentType += “left”;
  13. break;
  14. case 180:
  15. contentType += “flipped”;
  16. break;
  17. }
  18. document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
  19. }

iPhone才识别的CSS

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

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

缩小图片

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

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

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

默认隐藏工具栏

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

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

使用特殊链接

这两条不用说了吧:

  1. <a href="tel:12345654321">打电话给我</a>
  2. <a href="sms:12345654321">发短信</a>

模拟:hover伪类

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

  1. var myLinks = document.getElementsByTagName('a');
  2. for(var i = 0; i < myLinks.length; i++){
  3. myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
  4. myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
  5. }

然后用CSS增加hover效果:

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

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

iphone fixed positioning

关于漂浮定位,测试后发现 { position: fixed; } 不能为其用,

可以改为 { position:absolute; } 来实现,可以使用iphone看下DEMO:iphone-fixed-positioning

来源:http://uecss.com/demo/jeff/iphone-fixed-positioning/

iphone/ipod网页开发教程及规则的更多相关文章

  1. MIP开发教程(二) 使用MIP-CLI工具调试MIP网页

    初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置: $ mip i ...

  2. iphone开发教程下载

    iphone开发教程下载 3月份花了1个月研究ios 开发,看了几百页的iphone开发教程,累积了不少电子书,盘点一下 Beginning iPhone 4 Development: Explori ...

  3. [小程序开发] 微信小程序内嵌网页web-view开发教程

    为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...

  4. 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C

    blog.csdn.net/totogo2010/article/details/8205810  目录(?)[-] 第一课名称 MVC and Introduction to Objective-C ...

  5. iphone/ipad前端开发技巧

    iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现 ...

  6. iPhone与iPad开发实战读书笔记

    iPhone开发一些读书笔记 手机应用分类1.教育工具2.生活工具3.社交应用4.定位工具5.游戏6.报纸和杂志的阅读器7.移动办公应用8.财经工具9.手机购物应用10.风景区相关应用11.旅游相关的 ...

  7. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)

    本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料, ...

  8. ASP.NET Aries 入门开发教程4:查询区的下拉配置

    背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程(十七):个性化菜单接口说明

    前不久微信上线了个性化菜单接口,Senparc.Weixin SDK也已经同步更新. 本次更新升级Senparc.Weixin.MP版本到v13.5.2,依赖Senparc.Weixin版本4.5.4 ...

随机推荐

  1. 在IIS7.5打开网页的时候,提示: HTTP 错误 500.0 - Internal Server Error 调用 LoadLibraryEx 失败,在 ISAPI 筛选器 "C:\Windows\Microsoft.NET\Framework\v4.0.30319\\aspnet_filter.dll" 上。解决方法

  2. android内存耗用:VSS/RSS/PSS/USS

    VSS- Virtual Set Size 虚拟耗用内存(包含共享库占用的内存)  不是真实当前应用进程所占用的内存. 内存分配的原理 从操作系统角度来看,进程分配内存有两种方式,分别由两个系统调用完 ...

  3. English substitute

    英语写作中替换掉用到发腻的↓常用词↓,吐血整理2小时~~   动词替换:   1.Improve 提高:   Promote: 促进AC之间的贸易 promote the trade between ...

  4. WPF: DatePicker

    获取DatePicker:date_Start上显示的时间date_Start.SelectedDate 比较两个dateTime类型的时间: DateTime StartDate =Convert. ...

  5. poj-------------(2752)Seek the Name, Seek the Fame(kmp)

    Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11831   Ac ...

  6. 164. Maximum Gap *HARD* -- 无序数组找出排序后连续元素的最大间隔

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  7. 安卓手机修改host

    电脑修改 注意:usb设置为调试模式 1.手机必须先root,小米可以安卓开发版系统即可 2.安卓 adb工具(android debug bridge) 3.依次执行下面的命令 1.adb root ...

  8. AngularJS开发经验(转)

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...

  9. 网站开发中必备的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  10. 600万用户数据导入MYSQL、MSSQL、Oracle数据库方法【转】

      1.导入MySql数据库 参考文献:http://zhuaxia.org/blog/post/145 1.1.LOAD DATA INFILE语法 因为获得的数据库文件是一个文本文件www.csd ...