iphone/ipod网页开发教程及规则
侦测iPhone/iPod
开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location = "http://m.example.com"; } }
虽然Javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向:
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { header('Location: http://yoursite.com/iphone'); exit(); }
设置viewpoint和屏幕等宽
如果不设置viewpoint,网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站,这一条很有用,而且很简单,只需要插入到head里就可以:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
使用iPhone规格图标
如果你的用户将你的网站添加到home screen,iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标,这样当然更好。图片是57×57大小,png格式。不需要自己做圆角和反光,系统会自动完成这些工作。然后将下面这条加入head中:
<rel="apple-touch-icon" href="images/youricon.png"/>
阻止旋转屏幕时自动调整字体大小
-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才识别的CSS
如果不想设备侦测,可以用CSS媒体查询来专为iPhone/iPod定义样式。
@media screen and (max-device-width: 480px) {}
缩小图片
网站的大图通常宽度都超过480像素,如果用前面的代码限制了缩放,这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够,我们可以用CSS让iPhone自动将大图片缩小显示。
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
注意如果原图片非常大,或一个页面非常多图,最好还是在服务器端缩放到480像素宽,iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。
默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是横向屏幕时。我们可以让它自动卷动上去。
window.addEventListener('load', function() { setTimeout(scrollTo, 0, 0, 1); }, false);
使用特殊链接
这两条不用说了吧:
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
模拟: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效果 */ }
这样设计一个链接,感觉可以更像按钮。并且,这个模拟可以用在任何元素上。
iphone fixed positioning
关于漂浮定位,测试后发现 { position: fixed; } 不能为其用,
可以改为 { position:absolute; } 来实现,可以使用iphone看下DEMO:iphone-fixed-positioning
来源:http://uecss.com/demo/jeff/iphone-fixed-positioning/
iphone/ipod网页开发教程及规则相关推荐
- iPad网页开发教程及规则
iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现 ...
- 微信网页开发教程 php,PHP实现微信网页授权开发教程,php授权教程_PHP教程
PHP实现微信网页授权开发教程,php授权教程 微信网页授权是服务号才有的高级功能,开发者可以通过授权后获取用户的基本信息:在此之前,想要获取消息信息只能在用户和公众号交互时根据openid获取用户信 ...
- python动态网页开发教程_python django创建一个属于自己的动态网站
您如何开始使用Python创建网站?好吧,你可以自己完成所有工作,并编写一个在Web服务器上运行的程序,接受页面请求并以HTML和其他资源的形式提供响应.然而,这是很多工作,那么为什么在有大量现有工具 ...
- Unity iPhone Touch Animation Tutorial,untiy3d iphone简单动画开发教程
老外写的一篇关于在iphone上进行unity3d开发的一个小教程,比较基础,主要的知识点包括: 1.点击触摸屏,播放对应的物体动画 2.在maya中创建好物体及动画 3.在unity3d中进行动画设 ...
- 刘金玉编程HTML5百度资源,零基础html5网页开发教程第008期 导航栏开发案例
本节知识视频教程 小伙伴们大家好,欢迎收看刘金玉编程第八期.本期我们主要做一个导航栏的一个. 导航栏,有的人又喜欢叫菜单栏.确实和菜单有点像.导航栏几乎会用在所有的网站中.那么导航栏是怎么开发出来的呢 ...
- 刘金玉编程HTML5百度资源,零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧...
知识回顾: 上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧. 本节知识视频教程 哈罗哈罗,小伙伴们大家好!我们这一期就用hbuilder来做一 ...
- python网页开发教程_Python动态Web开发基础—Python编程从入门到精通(10)
') #body标签 print (' Hello Word! 我是来自菜鸟教程的第一个CGI 程序') print ('
- MIP开发教程(二) 使用MIP-CLI工具调试MIP网页
初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置: $ mip i ...
- 斯坦福大学公开课:iPhone开发教程2010年冬
2019独角兽企业重金招聘Python工程师标准>>> 斯坦福大学公开课:iPhone开发教程2010年冬 http://v.163.com/special/opencourse/i ...
最新文章
- python利用wx.grid网格显示数据
- SOA Notes
- 创业故事:腾讯的创始人们
- NodeJS文档之Buffer(1)-Buffer的简介
- Django之 RESTful规范
- 数据分析之numpy
- PHP中使用了mcrypt_decrypt函数处理Json Json_decode 返回空值或者 NULL 的问题 json_last_error 3...
- SQLServer2008安装教程
- Scriptcase Crack,PHP Web 开发工具
- 塔康信号matlab,干扰效能仿真,jamming effect simulation,音标,读音,翻译,英文例句,英语词典...
- 鼎立测试软件能锁网吗,路测软件鼎利通信Pioneer操作培训PPT(ET128).ppt
- PostgreSQL - 一文看懂explain
- python穷举法列举_穷举法
- 专业导师告诉你,有哪些51单片机教程值得大力推荐
- JAVA求2019的2019次幂的最后五位
- Django建立一个音乐网站(一)
- 基于动态手势识别的酷狗音乐播放器控制
- swiper中ajax获取数据不能滑动问题
- android All
- SSD目标检测的个人总结(1)—— 锚框的生成
热门文章
- mysql索引原理传送门_MySQL索引底层实现原理
- CentOS7安装单机版RabbitMQ集群
- tf.group()用于组合多个操作
- 孜然导航系统 v2.3
- python生成器用法_理解python中生成器用法
- python 量化交易_Python量化交易,tushare与talib学习示例演示,双均线(DMA)买卖策略...
- python 进程池_Python实践17-进程池
- c语言 a 0,[整理]C语言中的a,a和a[0]
- html5响应式网站建设网络类织梦模板
- 功能齐全的交易系统导航网源码