日期:2014-05-17 浏览次数:20721 次
随着移动设备上网的普及,很多网站都会进行客户端浏览器类型侦测,主要是靠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模拟器测试网页情况,你还是能够通过一下方式进行测试:
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"
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"; } }
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) { header('Location: http://ipad.www.opensoce.com'); exit(); }
RewriteCond %{HTTP_USER_AGENT} ^iPad RewriteRule ^index\..*$ ipad.html [L] RewriteCond %{HTTP_USER_AGENT} ^iPhone RewriteRule ^index\..*$ iphone.html [L]
if ($http_user_agent ~*iPad ) { proxy_pass http://ipad.www.opensoce.com; } if ($http_user_agent ~*iPhone ) { proxy_pass http://iphone.www.opensoce.com; }
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的一点简介:
* 使用CSS3渐变,字体阴影,圆盒以边界–这些对菜单栏和简单的网站设计师特别实用的。 * 如果你想显示视频,使用HTML5 视频播放器代替Flash(显然它就不能工作)。 * 使用HTML5创建离线程序并且脱机存储数据。 * 各种实用的教程到处都有,当在开发我的iPad网络程序时我就已经利用了它们。Google他们,得到创意。
利用普通电脑的Safari测试无插件支持情况,在偏好设置->安全->,取消启用插件的选择框,
viewpoint,可以理解为:视窗、可视区域,相对于iPad硬件限定的窗口来定义的。iPad窗口大小不可改变,但viewpoint视窗大小可以设置调整。
如果在iPhone开发中指定了视窗标签设置, 在iPad开发中必须进行必要的校正。例如:
在iPhone中,我们会用下述代码的方式指定屏幕宽度
<meta name="viewport" content="width=320" /><!--不适应iPad-->
而在iPad中,则必须用device-width替代具体的宽度像素数。