原文:http://uecss.com/iphone-ipad-web-development-skills.html
iphone/ipad异常刚猛,在此把收集到的一些开发技巧罗列出来,方便项目中参考使用,如下:
侦测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) { |
虽然Javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向:
1 | if (strstr($_SERVER[ 'HTTP_USER_AGENT' ], 'iPhone' ) || strstr($_SERVER[ 'HTTP_USER_AGENT' ], 'iPod' )) { |
设置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 | < rel = "apple-touch-icon" href = "images/youricon.png" /> |
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有css:
1 | html, body, form, fieldset, p, div, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 {-webkit-text-size-adjust: none ;} |
侦测设备旋转方向
iPhone可以在横屏状态下浏览网页,有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转,并且替换css:
01 | window.onload = function initialLoad() {updateOrientation();} |
03 | function updateOrientation(){ |
04 | var contentType = “show_”; |
05 | switch (window.orientation){ |
07 | contentType += “normal”; |
11 | contentType += “right”; |
19 | contentType += “flipped”; |
22 | document.getElementById(“page_wrapper”).setAttribute(“class”, contentType); |
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 ;} |
注意如果原图片非常大,或一个页面非常多图,最好还是在服务器端缩放到480像素宽,iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。
默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是横向屏幕时。我们可以让它自动卷动上去。
1 | window.addEventListener( 'load' , function () { |
2 | setTimeout(scrollTo, 0, 0, 1); |
使用特殊链接
这两条不用说了吧:
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 ); |
然后用CSS增加hover效果:
这样设计一个链接,感觉可以更像按钮。并且,这个模拟可以用在任何元素上。
iphone fixed positioning
关于漂浮定位,测试后发现 { position: fixed; } 不能为其用,
可以改为 { position:absolute; } 来实现,可以使用iphone看下DEMO:iphone-fixed-positioning
参考资料:
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