iphone/ipad网站开发技巧整理
iphone/ipad网站开发技巧整理, ipad 屏幕翻转 网页宽度自适应
2011-04-18 17:22
iphone/ipad异常刚猛,在此把收集到的一些开发技巧罗列出来,方便项目中参考使用,如下: 侦测iPhone/iPod 开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL。 if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){ 虽然Javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向: if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone')|| strstr($_SERVER['HTTP_USER_AGENT'],'iPod')){ 设置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.οnlοad=function initialLoad(){updateOrientation();} iPhone才识别的CSS 如果不想设备侦测,可以用CSS媒体查询来专为iPhone/iPod定义样式。 @media screen and (max-device-width: 480px) {} 缩小图片 网站的大图通常宽度都超过480像素,如果用前面的代码限制了缩放,这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够,我们可以用CSS让iPhone自动将大图片缩小显示。 @media screen and (max-device-width: 480px){ 注意如果原图片非常大,或一个页面非常多图,最好还是在服务器端缩放到480像素宽,iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。 默认隐藏工具栏 iPhone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是横向屏幕时。我们可以让它自动卷动上去。 window.addEventListener('load',function(){ 使用特殊链接 这两条不用说了吧: <a href="tel:12345654321">打电话给我</a> 模拟:hover伪类 因为iPhone并没有鼠标指针,所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件,onTouchStart 类似 onMouseOver,onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript: var myLinks = document.getElementsByTagName('a'); 然后用CSS增加hover效果: a:hover, a.hover{/* 你的hover效果 */} 这样设计一个链接,感觉可以更像按钮。并且,这个模拟可以用在任何元素上。 iphone fixed positioning 关于漂浮定位,测试后发现 { position: fixed; } 不能为其用, 参考资料: 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 转自:http://uecss.com/iphone-ipad-web-development-skills.html |
iphone/ipad网站开发技巧整理相关推荐
- iphone/ipad前端开发技巧
iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现 ...
- iOS 7: iPhone/iPad应用开发技术详解
iOS 7: iPhone/iPad应用开发技术详解 作者:刘一道 出版社:机械工业出版社 出版年:2013-11 页数:507 定价:79.00元 ISBN:9787111440512 样章下载:h ...
- iOS 7 iPhone iPad应用开发技术详解
2019独角兽企业重金招聘Python工程师标准>>> iOS 7 iPhone iPad应用开发技术详解 本书内容全面,从 Objective-C语法知识.iOS功能特 性,到高级 ...
- 疯狂iOS 讲义(上) Objective-C 2.0与iPhone/iPad应用开发基础(国内首部iOS 7相关著作,小伙伴们,学好iPhone/iPad应用开发,我们一起做土豪吧)
疯狂iOS 讲义(上) Objective-C 2.0与iPhone/iPad应用开发基础(国内首部iOS 7相关著作,小伙伴们,学好iPhone/iPad应用开发,我们一起做土豪吧) 李刚 编 IS ...
- 学成在线项目开发技巧整理---第一部分
学成在线项目开发技巧整理---第一部分 1.数据字典 2.http-client远程测试插件,可以保存测试数据 3.三种跨域解决 4.具有多层级数据查询思路 5.Mybaits分页插件原理 6.根据文 ...
- 疯狂iOS 讲义(上) Objective-C 2.0与iPhone/iPad应用开发基础
疯狂iOS 讲义(上)Objective-C 2.0与iPhone/iPad应用开发基础(国内首部iOS 7相关著作,小伙伴们,学好iPhone/iPad应用开发,我们一起做土豪吧) 李刚编 ISBN ...
- Windows平台上安装搭建iPhone/iPad的开发环境
很多朋友希望在体验或学习iphone开发,但是iphone开发环境一般需要 安装在mac计算机下mac os中. 这给许多朋友带来了额外成本投入. 网上已经有各种破解方法,在非苹果电脑上安装iphon ...
- 【转】推荐29个iphone/ipad 常用小技巧
[size=large] 转自:[url]http://www.gbin1.com/internet/mobile/20120323iphone/index.html[/url] 随着市场上iphon ...
- 网站开发技巧参考大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
最新文章
- 【DIY】热水器升级加装远程wifi控制功能,esp8266远程红外控制热水器启动,稳定连续运行4天了,功能展示终稿...
- 小米机器人虚拟墙设置_扫地机器人虚拟墙应该怎么放置使用
- 记一次重大的生产上线事故,借此反思成长
- linux shell for while if case break continue echo test 及算术运算符 关系运算符 布尔运算符 逻辑运算符 字符串运算符 文件测试运算符
- LOL手游2.3版本终于来临,国服玩家满意新增的皮肤吗?
- 透过汇编另眼看世界之函数调用
- JAVA和javascrito_JAVA 和JavaScript的split方法异同
- java nature_Java中BufferedReader和scanner的对比 - nature
- C# WebApi POST 提交
- Thrift CentOS安装和使用
- Nginx 架构详解
- android使用自定义,Android 自定义View的使用
- SAP License:共享服务的今天和明天
- 类扩展(Class Extension)
- Windows10下python pip卸载并重新安装
- iOS Facebook pop动画进阶
- python数字的表示
- Python3,11行代码解密摩斯电码,真実はいつもひとつ。
- 刘知远 | 语义表示学习
- python爬虫——爬取起点中文网作品信息