WEBAPP开发技巧小结(手机网站开发注意事项)

所属分类: 网页制作 / 应用技巧 阅读数: 1135
收藏 0 赞 0 分享

1、要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以采用media query解决(让IE支持CSS3 Media Query实现响应式Web设计CSS3 Media Queries);
2、因为手机大多是高级浏览器,可以使用html5+css3开发;
3、合理灵活的使用meta标签,具体如下;


复制代码
代码如下:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />


第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
例子见:常用meta标签示例

4、一定要注意链接的大小,因为大多是触屏手机,要让用户很方便的能点击到标签(我以前看到过文章,现在找不到出处,好像是最小得42px*42px):

操作对象的大小符合手指的操作,按键的大小设置规范:
食指点击的间距 约为7*7 mm, 1mm间距,
拇指点击8*8 mm,2mm间距。当前推荐的值为9mm 大小,最小应不小于7mm。
当然一些重要操作,或者频繁点击的区域可以设置的略微更大一些。

5、要做好优雅降级(平稳退化),少用JS,图片,要用户禁止下载JS和图片的时候页面也能体现价值(因为很多APP默认设置为3G下是不自动下载图片等资源的)。
6、对于图片的处理,只要设置宽度,让图片自适应,防止图片变形,当然要兼容的设备分辨率差距很大的时候,需要利用media queries根据分辨率的不同加载不同的图片(需要同一张设置为几种不同的规格),一是防止小分辨率设备加载大图片浪费流量,二是防止大分辨率设备加载小图片导致的图片模糊问题。
7、当设置分辨率太小的话,显示正常模块显得太拥挤的情况下,可以利用media queries根据分辨率适当的显示或隐藏模块,如768px下显示2列布局,320px显示1列布局等。


复制代码
代码如下:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

8、当然也可以根据判断不同的终端跳转到不同的URL,见:手机平板等移动端适配跳转URL的javascript
9、手机浏览器多而乱,而且手机系统的默认处理方法也不同,兼容问题丝毫不比PC版的简单,所以要总结归纳常用的处理方法,如-webkit-tap-highlight-color:rgba(0,0,0,0);/*禁止链接高亮*/-webkit-touch-callout:none;/*禁止链接长按弹出选项菜单*/等等
10、对手机平板的移动端来说,流量是很重要的,所以webapp中class和id的命名尽量断点,如头部可以命名为hd,中间为bd,底部为ft等(此建议待定,因为考虑到后期维护是否方便等问题);

更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多