我将使用xhtml、css、javascript和php构建一个网站。这个网站应该像出现在电脑上一样正确地出现在iPhone和其他类型的智能手机上,所以我想知道当我开始构建这样的网站时,我应该记住什么。
1)使用<meta name="viewport">
标记正确设置比例,以便您的内容填充屏幕
2) 避免内部滚动区域,如带有overflow:scroll
的iframe或div,因为这些区域在iOS4及更早版本或大多数版本的Android 上不起作用
3) 避免position:fixed
将导航定位到屏幕的特定部分,因为这在iOS4和更早版本或大多数版本的Android 上不起作用
4) 不要依赖基于悬停或滚动的交互,比如鼠标悬停时出现的下拉菜单,因为这些菜单在基于触摸的设备上工作不好或根本不起作用
5) 避免小文本或紧密链接,因为如果你的页面宽800像素,屏幕缩小到320像素,这些内容将很难阅读或点击。
6) 不要使用Flash
更普遍地说,你可以选择如何处理:
1) 用漂亮的大文本制作一个单独的网站设计,当缩小到小屏幕时可以很好地使用
2) 为您的网站设计两种布局,并使用JavaScript或CSS媒体分辨率查询在移动和桌面版本之间切换样式表,或
3) 制作一个所谓的液体布局,在不缩放的情况下,可以为不同的屏幕大小优雅地缩放宽度
您应该:
- 使您的智能手机列表更加特定。它们有很多,基本上不可能在每台设备上创建一个与智能手机的至少一个定义相匹配的高级交互式网站
- 在设备上不断测试,即使是官方模拟器也不能完全按照设备的工作方式工作(我相信苹果建议在设备上测试,而不是依赖他们的模拟器)
- 请注意使用
click
或hover
等JavaScript事件的脚本-它们在目标设备上可能更复杂(例如touchstart
、touchend
、touchmove
等),并确保将启用触摸的事件考虑在内
如果你已经定义了你的目标手机,你可以检查一些移动JavaScript框架是否满足你的需求(比如Sencha,但我发现它至少在我测试的一款Symbian手机上不起作用)。
你还应该检查兼容性表,显示你想使用的特定功能在哪个智能手机上可用;浏览器这会为你节省很多时间。