手机网站开发相关介绍

随着无线网络技术的发展,手机上网的速度越来越快,手机的功能也越来越强大。今天就像大家介绍下手机网中的开发。

手机上网的特点

手机屏幕一般在240 * 320以上的称之为大屏幕手机  因为收的CPU频率低,不能像电脑一样快的浏览。做手机网站的时候像JS等要少用。 上网速度慢,联通的3G网络还可以。 上网高,3G的网速快些,但是费用却很高。 浏览器众多,兼容性差。一不小心就显示不出来。

制作原则

1.网站要要简洁,功能少能不要的就删了。

2.图片要少用,尽量用汉字,在高昂的网络资费中,有的用户会把图片的显示禁止了。以减免流量。

3.网站尽可能的小点,页面太长则不适用浏览,用户体验不好,太宽手机打开显示不全,或者显示不工整。

4.现在的手机大屏的,小屏的都要,所以在设计的时候都要考虑到。

5.由于手机网站屏幕小的特点,用户在浏览的时候要尽量快的让用户查到自己需要的信息,因为手机屏幕的小用户寻找起来比价吃力,长时间的寻找,会给你的网站被大大的减分的。

· 少数手机对CSS完全不支持; 

JavaScript部分

这部分测试相对不那么让人抓狂,要么干脆不支持,如果支持的话,对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级。

其他

· 部分手机不支持png8和png24,所以尽量使用jpg和gif的图片 

· 另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计 

· 部分手机对于超大图片,既不进行缩放,也不显示横下滚动条 

· 少数手机在打开超过20k的测试页面时,会显示内存不足 

开发中你需要注意的问题

· 手机网页编码需要遵循什么规范? 遵循XHTML Mobile Profile规范,简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTMLMP 是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。 

· 网页文档推荐使用扩展名? 推荐命名为xhtml,按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。 

· 为什么现今大多数的网站一行字数上限为14个中文字符? 由 于手持设备的特殊性,其页面中实际文字大小未必是我们在CSS中设定的文字大小,尤其是在第三方浏览器中。例如Nokia5310,其内置浏览器 页面内文字大小与CSS设定相符,但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试,其文本大概在16px左右。 假如屏幕分辨率宽度为240px,去除外边距,那么其一行显示14个字以内,是比较保险(避免文本换行)的做法。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端学习心得

【vue/axios/vue-router】制作一个精致的美团项目

1282
来自专栏申龙斌的程序人生

群分享:关于Markdown,你可能想知道的

写在最前面的话 本文参考了很多大神的 Markdown 入门教程,旨在推广,不标原创。所引部分参考文献列于文末,如有疏漏,还请海涵。 文中介绍的 Markdo...

36011
来自专栏大数据钻研

前端开发,从草根到英雄(第一部分)

我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

2735
来自专栏有趣的django

微信小程序实战--集阅读与电影于一体的小程序项目(一)

真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。

902
来自专栏张善友的专栏

Web 上构建MDI 应用程序---Prototype Window Class

      今晚在网上看到一个非常酷的JS框架Prototype Window Class。Web开发者通过Prototype Window Class便可以轻...

1849
来自专栏无原型不设计

你所不知道的快速原型设计技巧

快速原型设计工具,怎么选?当然是要快,要简单,这样回答很正确,但太笼统。具体来讲,交互设置要简单方便,组件的交互和样式要复用高效,方便重复使用,才能算真正的更快...

1186
来自专栏互联网杂技

轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: ? 但轮播图对用户真的有意义吗...

2917
来自专栏IMWeb前端团队

chrome开发者工具-Timeline

最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个...

1946
来自专栏无原型不设计

简单易用的交互设计工具:摩客串串Chinco

今天给大家介绍一款简单实用的原型交互演示设计工具—摩客串串Chinco。 ? 为什么要介绍这款产品呢? Chinco是继国产原型设计软件Mockplus之...

2917
来自专栏MixLab科技+设计实验室

从网易《初心》H5里学到的一些

这篇文章可以作为之前写的一篇《技能之H5》的补充知识。 1、拖放 HTML5 标准的组成部分。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 ...

3226

扫码关注云+社区