源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 512|回复: 23

[心得技巧] 小屏幕移动设备网页设计需要注意的事项

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2011-5-11 22:52:11 | 显示全部楼层 |阅读模式
在过去,网站建设中有一种网页通常被称为WAP网站建设,或WAP站建设 原因是这类网页起源于一个叫WAP的无线协议。
WAP能够运行于各种无线网络之上,如GSM、GPRS、CDMA等。WML是无线注标语言(Wireless Makeup language)的英文缩写。支持WAP技术的手机能浏览由WML描述的Internet内容。 而如今的小屏幕移动设备,比如手机,都已经具备访问WWW的能力。其内置的浏览器,或是第三方浏览器大多是WebKit引擎。
也因此没人再用WML组织WAP站点了,一般都是用HTML+CSS的方式来建设WAP网站。   在设计小屏幕移动设备网页时,你可能先得了解这么一些前提:
  • 手机屏幕分辨率乱得一塌糊涂,什么分辨率都有!
  • 我们的手机上网费用贼贵贼贵!
  • UC浏览器拥有了贼大的市场占有率!

 
关于UC浏览器:

没错,不得不提它。谁叫它的市场占有率高呢。
对于UC浏览器而言,显然是非常适合我国国情的,它给用户最大限度地节约手机上网流量。(UC浏览器打的口号貌似也就是省流量这一招了)。
基于移动应用,以及文本的可读性,UC浏览器也体现了大字体、大行距等特性。
UC浏览器相对于其他手机浏览器而言,对HTML标签和CSS属性存在有特殊的、自定义的处理方式。
而所做的这些特殊处理,按目前来看,应该将会继续保留较长一段时间,直到手机上网费用得到较大幅度的下降,令消费者更大胆地移动上网之时。

在实际开发中,我们发现了UC浏览器对CSS存在一些“特殊照顾”:

  • 不支持font-family属性,也就是说,在UC浏览器你只能看到一种字体;
  • 不支持font-szie属性,也就是说,在UC浏览器你只能看到一样大小的字体;
  • 不支持width、height、padding、margin、line-height属性,也就是说,在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔;
  • 不支持固定像素的宽度,100%显示页面,也就是说,在UC浏览器始终将看到的是“满屏的”;
  • 不支持浮动、层叠布局,float和position属性无效,也就是说,在UC浏览器你只能看到“左对齐”。
  • 支持background-color,但不支持background-image,也就是说不支持CSS背景图显示,在UC浏览器你只能看到背景色。

不过,个人仍然认为,如今建设小屏幕移动设备网页网站,完全可依据WebKit引擎的浏览器作为标准进行界面开发。
换句话说,我们设计支持UC浏览器的网页,而不是设计以UC浏览器为标准的网页
这样做还有个好处,可以在大部分的手机浏览器上保证相对一致的样式。
而针对UC这种连float等标准CSS属性也不支持的浏览器,别过于纠结它!
但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序,严重建议HTML编码人员留意各个HTML标签的先后顺序。
因为只有在支持float、position属性的浏览器下,页面各个容器才可以任意浮动或层叠的。否则,浏览器将按HTML标签的先后顺序显示。

 
另外一些小屏幕移动设备网页设计的相关补充:

  • 网站头(header)
    考虑到小屏幕移动设备的一些特性,设计网页时,有些可以去掉网站头(包括LOGO、全局导航什么的)。
    比如flick的查看大图页面就去掉了网站头。 

这里我自创了一句时髦的设计原则:“针对于小屏幕移动设备的界面设计,在某些指定任务的界面,应优先于让用户关注当前任务,而不是应用程序本身。” 这个原则是行得通的,同样适用于设计移动设备应用程序~
打个比方说,如果你在设计小屏幕移动设备访问的邮箱时,完全可以在写信、邮件阅读页去掉网站头~

  • 链接聚焦(hover)
    各个浏览器均自定义了链接的hover样式,比如有的浏览器给链接聚焦时加了边框,有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。
  • 鼠标事件(mouseover)
    考虑到触摸屏操作,用户无法用手指进行over的操作,因此应禁止在应用于移动设备访问的网页使用mouseover
  • 回复

    使用道具 举报

    16

    主题

    2万

    回帖

    174

    积分

    注册会员

    Rank: 2

    积分
    174
    发表于 2022-8-23 12:44:09 | 显示全部楼层
    挺不错的东西
    回复 支持 反对

    使用道具 举报

    0

    主题

    1万

    回帖

    68

    积分

    注册会员

    Rank: 2

    积分
    68
    发表于 2022-11-27 10:40:08 | 显示全部楼层
    还有人在不。。。。。。。。。。啊
    回复 支持 反对

    使用道具 举报

    7

    主题

    2万

    回帖

    398

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    398
    发表于 2022-12-14 00:54:09 | 显示全部楼层
    需要很久了终于找到了
    回复 支持 反对

    使用道具 举报

    8

    主题

    2万

    回帖

    52

    积分

    注册会员

    Rank: 2

    积分
    52
    发表于 2023-1-19 06:52:58 | 显示全部楼层
    2222222222222222
    回复 支持 反对

    使用道具 举报

    1

    主题

    2万

    回帖

    362

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    362
    发表于 2023-8-30 05:39:37 | 显示全部楼层
    撒旦撒旦撒擦擦擦擦
    回复 支持 反对

    使用道具 举报

    2

    主题

    2万

    回帖

    473

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    473
    发表于 2023-8-30 22:41:34 | 显示全部楼层
    儿童服务绯闻绯闻绯闻
    回复 支持 反对

    使用道具 举报

    0

    主题

    1万

    回帖

    0

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    0
    发表于 2023-9-1 11:16:25 | 显示全部楼层
    还有人在不。。。。。。。。。。啊
    回复 支持 反对

    使用道具 举报

    2

    主题

    2万

    回帖

    381

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    381
    发表于 2023-9-8 20:10:27 | 显示全部楼层
    哈哈哈哈哈哈哈
    回复 支持 反对

    使用道具 举报

    2

    主题

    2万

    回帖

    499

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    499
    发表于 2023-9-9 23:04:57 | 显示全部楼层
    天天源码社区。。。。
    回复 支持 反对

    使用道具 举报

    高级模式
    B Color Image Link Quote Code Smilies

    本版积分规则

    手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

    GMT+8, 2024-11-21 23:32 , Processed in 0.078490 second(s), 26 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表