标签归档：手机网站

移动平台3G手机网站前端开发布局技巧汇总

发表于 2011/05/10 由 前端开发-武方博  5,213 views

您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系，给自己一点信心吧，用心的阅读下去…… 自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。 一......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 5 条评论

触屏手机3G网站设计

发表于 2011/05/06 由 前端开发-武方博  2,452 views

随着智能手机iphone和Android的热潮，衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website。 触屏手机网站在中国还属于起步阶段，从行业的现状来看，其体验参差不齐，笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计： 一、设备 ·分辨率与屏幕尺寸 ·触屏机的交互特点 ·性能 1. 分辨率是设计师做网站时首要考虑的问题，iphone/ipod touch目前有2种分辨率：480*320、960*640,屏幕的物理尺寸都是3.5英寸，Android由于是开源系统，生产商诸多，导致分辨率，屏幕尺寸非常多，但目前主流的分辨率为：480*320、800*480，根据以上情况推荐以480*320为标准设计，（客户端则推荐以大分辨率来设计，）同时考虑横屏情况下的自适应。 2. 触屏手机的特点是直接通过手指操作对象，因此需要为网站设定一个理想的行高来满足手指的触摸点击。 来自lu......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , | 3 条评论

手机浏览器的viewport（视觉窗口）

发表于 2011/04/16 由 前端开发-武方博  2,698 views

最近我做了一点儿针对手机的Web开发和相关研究。按说，Web自设计之初，就已经考虑了设备无关性。然而，现实总是不尽如人意。     我们知道大多数网页都是针对桌面显示器开发和测试的，但是手机屏幕通常要比桌面显示器小很多，比如iPhone也就是320px。那么那些网页在手机上如何浏览呢？     一种是把网页缩放到很小，你可以看到整个网页但是看不清字了；或者只看网页的一个局部，然后上下左右移动来看其他部分。现在的手机浏览器把两种模式结合使用。（或许还有第三种——分析网页，将其中内容抽取出来，重组，然后呈现，不过这里不讨论这种方式。）     如果仅仅是出现横向滚动条，那问题倒不是很大。对于那些采用固定布局的“像素级精确设计”确实就是如此。但是使用自适应布局的网页就有问题了。比如一个三栏布局，其中一个边栏可能只有20%宽度，320px的屏幕上只有60多像素，只能放5个汉字，排版不美观不要说，如果里面有一......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , , , , , , , , , | 一条评论

手机浏览器客户端交互设计适配之——屏幕大小

发表于 2011/03/14 由 前端开发-武方博  1,970 views

  以下内容来自于淘宝UED 随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上迁移。然而手机与PC 不一样，PC经过了多年的发展，在设计上形成了很多不成文的规则，如网页的宽度都在960px左右【当然，由于整体的电脑屏幕往大尺寸及高分辨发展，除了背景宽屏自适应外，不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。 在客户端的设计过程中，针对不同的屏幕大小，应该如何来设计？是否每个大小的屏幕尺寸都需要一个新的界面布局，还是所有的屏幕尺寸都使用相同的界面布局？我们将在下面的内容中来探讨这些内容。 一、当前热门手机的屏幕大小  下图中，我抽取了国内某个网络电器城某周的10大畅销手机排名： 虽然只是2010年中的某一周的......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , , , , | 留下评论

Mobile WEB（手机网站）介绍

发表于 2011/03/10 由 前端开发-武方博  1,398 views

  Mobile 1：Mobile WEB介绍 简介 Opera的WEB标准课程是关于提倡WEB最佳实践，并完整地覆盖了建立现代站点所需要的所有技能和知识点，它使我们工作和浏览的WEB站点变得更加美好。这个迷你系列展开探讨了核心的WEB标准课程文章，你应该采纳所有的技能和观念，利用他们帮助你优化网站并顺利地在移动设备（或其他另类设备）上运行。首先我会进行一些常规和特殊的思考，在移动设备上运行页面，然后去写样式、编脚本并且测试，因为他们跟Mobile WEB开发相关。 这篇文章的结构如下： Mobile WEB的定义 与Mobile WEB有关的挑战 移动的限制性 屏幕尺寸/分辨率 输入机制 处理能力和可用内存 可用字体和颜色 WEB标准的支持 移动的优势 Mobile意味着随时移动! 摄像头、电话和其他硬件特性 Mobile web技术 WML Compact HTML XHTML mobile profile XHTML CSS 和语义标记 图片替换 CSS颜色值 摘要总结 习题   Mobile WEB的定义 “Mobile WEB&......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , | 评论关闭