我最近从css-tricks.com博客#38:iPhone设计的基础知识和技巧中完成了Chris Coyier教程.毋庸置疑,我非常兴奋,并向一个人建议我做一些代码猴工作,我们现在可以向他的客户提供iPhone网站.他说很酷,但其他移动设备呢？好问题.那么Android,Blackberry,WindowsMobile等网站设计的低端是什么？人们是否在困扰其他平台？谢谢.
对于iPhone Safari,Opera Mobile和Android开发中的Webkit类似(但不完全相同),并且开发非常简单.
您可以依赖CSS2.1和JavaScript + DOM(但要小心UI事件).只需对样式表进行一些更改,您就可以免费使用常规网站.
诀窍在于提供这些样式表.不要使用User-Agent字符串.
因为一些移动浏览器读取手持媒体,有些人坚持使用屏幕样式并假装有960px宽的屏幕(iPhone:/),所以你需要同时提供以下两种方式的移动样式表:
后者是CSS3媒体查询 - 非常有用,也适用于其他移动浏览器(您可以在样式表中使用它@media {}).
不要依赖:hover或onmouseover因为这些事件在触摸屏上不起作用.
onclick延迟,mousemove可能无法正常工作.自定义DHTML小部件(下拉菜单,滑动条)和拖放不会在触摸屏上工作,除非您使用触摸事件(幸运的是所有最新的浏览器采用).
除了Apple的专有权(以及IMHO不灵活且违反标记和布局之间的分离)之外,还可以看看CSS3 @viewport,它目前在最新的Opera中受到支持@-o-viewport,希望其他人也会关注.
要在Opera Mobile中测试页面,请获取模拟器(或只是较旧的桌面版本并选择"视图"→"小屏幕").
Opera Mini很特别,因为CSS重新格式化了一点,DHTML在服务器端执行,这并不总能给出你期望的结果.有模拟器可用.
您需要Android SDK,摆弄命令行以启动其笨重的UI,下载一堆软件包,创建具有十几个不相关的模糊设置的虚拟设备,耐心地让这个怪物加载并将计算机的粉丝变成四轴飞行器,然后你就可以了. .sss..slooowlyyyy在"浏览器"测试(我的英特尔i5太慢,无法模拟Galaxy Tab - 浏览器"停止响应"甚至在我输入URL之前)
获得带有Android的手机/平板电脑并在真实设备上进行测试更容易(但要避免使用三星的"iPod"等同物,因为它与过时的软件一样垃圾).
对于不喜欢Linux做事的人来说,Android浏览器真的很痛苦 - 只需要阅读JS控制台,你需要摆弄远程调试连接并在命令行上进行日志过滤.
有可用的模拟器(移动下载下的"Windows/Mac OS X/Linux"链接不是桌面版本,而是桌面移动操作系统).
模拟器是非常基本的,移动Firefox本身就是IMHO真的很好,例如overflow:scroll效果很好,而在基于WebKit的浏览器上溢出实现的变化非常不直观且完全破碎.
Windows Mobile <7的PIE与Windows上的IE不同.它主要是像IE4一样原始和错误,但(几乎没有)支持一些令人惊讶的高级属性,如display:table.
它同时读取两个handheld和screen样式表,违反标准并在脚中射击.如果您要支持PIE,则将链接放在handheld样式表的最后,并反转/覆盖其中屏幕样式的所有规则.
无论如何,它已经死了,很难得到一个模拟器.
Windows Phone 7目前与IE7一样,微软承诺后来会有IE9级别的东西.
最新的基于WebKit的BlackBerry浏览器相当不错,您可以将其视为一等公民(请参阅顶部链接的WebKits比较).
在BB OS6之前,这是一场噩梦.只有基本的HTML工作.CSS适用于某些模型,但它是原始的和破碎的.JavaScript的仅适用于某些型号和它的令人难以置信的缓慢和缺乏(忘了即使是最基本的DHTML).
RIM提供免费的BB模拟器(需要烦人的注册).如果你运气不好,它会正常启动一次然后你必须完全重新安装它:)
同样的事情是在低端手机上使用数百种其他移动浏览器(由具有良好模拟器功能的OpenWave提供支持).您必须为他们准备1列基本HTML精简版网站.
即使您为每个移动设备创建了优化的(X)HTML,Google Mobile Search的用户也永远不会看到它!相反,每个页面都将通过"无线转码器"代理,该无线转码器残酷地删除代码,剥离所有样式表和脚本(无论浏览器是否支持它们),甚至:(
京公网安备 11010802040832号 | 京ICP备19059560号-6 