Mobile Web下的编码设计(2)
来源:smbey0nd 发布时间:2010-01-28 10:42:00
移动浏览器的其它限制还有那些?
当然,在移动设备上开发网站时,除了浏览器对标准的支持外,还会遇到其它更多的限制因素。设备自身的限制因素,你也不得不考虑。例如:
有限的控制 – 不要只假设你的用户会使用鼠标来控制页面中的一切,你也要提供键盘的选择。一些手机用户可能没有类似鼠标这样的东东,所以类似这样的结构 :hover 以及 onClick 对他们来说是没有用的(这对可用性方面也是非常重要的 – 一些残障用户可能在用手方面会有些缺陷)。为用户提供的表单设计也同样重要 – 你可能已经感受到,用手机来填写那些又臭又长的必填表单有多么不爽。为了解决这个问题,试着去把那一坨内容用下拉菜单的方式展现出来,这比等着用户一个字一个字手动输入来的更靠谱(译者注:目前国内有某些山寨机浏览器对下拉菜单的支持可能有不同程度的问题。例如基于MTK系统的联想i61,默认情况下会显示所有选项,而在某些情况下会产生变形和“漂移”,使用时需要谨慎些)。另外,给表单设置一个最有可能的初始值,也是一个好主意。
有限的屏幕尺寸 – 想象一下你那美妙的1024×768的设计在240×320屏幕下,或者更小的屏幕下,它的可用性会是什么样子……有一些方法可以应对这个情况 – 你可以故意把页面设计的很简洁流畅,或者你可以通过采取功能检测或媒体类型检测(诸如此类)的手段,为移动设备提供不同的页面。另外对于屏幕尺寸,有些手机可能不需要这么麻烦,它们可能会提供“缩放模式”这样的机制,但是你却不能保证这一点。
有限的内存和带宽 – 移动设备所提供的可用内存明显比台式机少得多。因此,在你设计站点时,需要特别小心的考虑那些超大容量的相册图片,以及交互式流媒体视频的应用程序。此外,一些移动浏览器提供了关闭图像显示的选项,但是你也同样不能确定这一点。
有限的排版 – 我靠,你对台式机上那些排版非常痴情?你没有看到移动设备上的表现!虽然这条规则有很多例外情况,但大多数移动设备对字体的选择非常有限,只有一两种(like 1 or 2)。这个限制是由系统或浏览器决定的。
有限的颜色 – 一些移动设备在颜色方面的支持也非常有限。考虑你有多少页面的体验需要依赖于颜色,并确认那些对比色在移动设备上仍然支持。
这些限制因素,就是导致Mobile Web的体验与PC Web的体验不同之处的真正原因。千万别欺骗自己,觉得自己的网站在移动设备上的用户体验与台式机上会保持一致 – 这纯属YY。当然,你抛开浏览器,千方百计去确认用户体验这一点仍然值得肯定。
真正的办法,去确保你的网站为移动用户提供一个良好的体验,是测试,测试,再测试!一些Web设计师们已经认识到,除了他们自己的手机、台式机以及游戏机浏览器外,还需要有一大堆移动设备需要准备在手头。
解决问题的不同方法
人们普遍意识到,有三种办法可以解决移动开发的问题(已经被Cameron Moll证实了 – 找他的书看看)。可能的话,我建议你试试这三种方式 – 如前所述,在Opera,我们坚持相信One Web的理念 – 但是刚才我也说过,有些情况下这是很难实现的,或者也是没有必要的。下面是这三种方法:
务必坚持遵循Web标准
创建一个完全独立的移动网站
只创建一个站点(One Web),但是根据浏览它的设备和浏览器情况,添加优化代码。
现在,让我们开始对这些点逐个讲解。


猜你喜欢
- 本文实例讲述了Python实现正弦信号的时域波形和频谱图。分享给大家供大家参考,具体如下:# -*- coding: utf-8 -*-#
- 1. 定义本质是函数,用来装饰其他函数,为其他函数添加附加功能2. 原则a. 不能修改被装饰函数的源代码b. 不能修改被装饰的函数的调用方式
- 1. 起因当我们需要写一个非常非常长的循环时,通常在某个循环如果出现error,那么整个代码后面的循环就不能进行。这时候试想,如果你在服务器
- 之前跟一些小伙伴有个讨论:大概就是很多跟数据打交道的朋友都面对过很复杂的excel公式,有时嵌套层数特别多,肉眼观看很容易蒙圈。有了这样的需
- 前言在算face_track_id map有感:开始验证data={'state':[1,1,2,2,1,2,2,2],
- 随滚动条移动的DIV层js代码,无论你的滚动条到哪里这个DIV层就跟到哪里!代码中例举了五个方向的滚动div层例子:包括左上方的div,左下
- 效果图:代码如下:<!DOCTYPE html><html lang="en"><head
- socket文件:当用Unix域套接字方式进行连接时需要的文件。pid文件:MySQL实例的进程ID文件。1.pid-file介绍MySQL
- 这篇文章主要介绍了python主线程与子线程的结束顺序实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- <script>alert(escape("人"));alert(encodeURI("人&quo
- 一、前端工具vscode1.1、概述前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以
- pandas中的DataFrame中可以根据某个属性的同一值进行聚合分组,可以选单个属性,也可以选多个属性:代码示例:import pand
- 在接触公司一个系统时,公司使用的是SQL Server 2008数据库,里面涉及到了多个数据库之间的查询,而且数据库是分布式的,数据库分布在
- Django在做url设置时,如果有两个APP,那么再import时会出错解决的方法有两种:方法一:在每个APP里设置单独的url.py文件
- # -*- coding: utf-8 -*-class Heap(object): @classmet
- 近年来流行 Ajax,而 Ajax 的本质就是 XMLHttpRequest,是客户端 XMLHttpRequest 对象的使用。相对于 A
- 前言最近发现有些东西长时间不用就要忘了,坚持每天复习总结一个小知识点吧~异常是什么呢?就是在代码执行过程中非预期的执行结果,随着代码越来越复
- 本文实例讲述了PHP类的特性。分享给大家供大家参考,具体如下:对象向下传递特性当一个对象调用一个实例方法,然后在该方法中又去静态调用另一个类
- 下面我们将学习两个项目案例代码,分别解决Excel常见场景中的数据筛选问题和数据匹配问题。数据筛选要求我们在表中筛选出符合条件的数据。数据匹
- 1.正则匹配数字,\为转义字符,d+为匹配一次或多次如下所示:返回的结果为列表2.正则匹配小数如下所示,返回的结果125.6为字符串总结&n