标签归档：手机浏览器

移动平台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 条评论

用谷歌浏览器来模拟手机浏览器

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

 很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如果是普通浏览器，显示普通网页内容。 　　谷歌Chrome浏览器，可以很方便地用来当3G手机模拟器。在Windows的【开始】–>【运行】中输入以下命令，启动谷歌浏览器，即可模拟相应手机的浏览器去访问3G手机网页： 谷歌Android： chrome.exe –user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1" 苹果iPhone： chrome.exe –user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10" 诺基亚N97： chrome.exe –user-agent="Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.......查看更多>>

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

手机浏览器的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&......查看更多>>

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

手机移动浏览器列表

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

本页提供的所有细节 18 操作系统的智能手机浏览器。  如果你知道任何文件或资料下载位置的浏览器之一，以下浏览器上运行的客户端设备充分，由于内存的所有可能带来可能的问题。   Safari   Rating Excellent Vendor Apple OSs iOS Rendering engine WebKit Downloadable No; firmware Documentation Yes Versions Follow iPhone OS version numbers iPhone users are pretty decent at upgrading their phones to the latest firmwares, so you generally have to test in the latest version only. Notes Apple set out to make the best mobile browser in the world, and it has basically succeeded. Most other mobile browser vendors woke up and started to run, too. That’s good. Basically does not have caching. This is a trade-off, but it will still cause problems. A platform that claims to be......查看更多>>

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

手机浏览器列表和手机浏览器测试

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

  我给目前正在测试的15款移动浏览器做了一个列表。 在当前移动浏览器如此错综复杂、变幻莫测的形势下，这或许会对给你一些启发。 经常有人问我：“我到底该测试哪一个移动浏览器？”，这个问题意味着，你应该搞定哪些设备。现在我来尝试回答这个问题。 一个移动测试环境 在过去的一年内，我非常幸运。沃达丰不仅有大量的移动设备（译者注：PPK于2009年开始在沃达丰担任顾问和培训师的工作），也有一些人士会提供比较靠谱的建议。比如我需要一台非HTC的带轨迹球的Windows Mobile设备，他们通常会告诉我应该去测哪一台机器，以及为什么这样选择的原因。 但并非每一个人都是这样好的情况。所以，干脆地说，这只是我的建议。 iPhone 和 Android 我假设你已经有了一台iPhone或Android手机。用它来测试你的网站（你可能已经这么做了）。看到最牛B和强悍的移动浏览器，你可能会有很多想法和灵感。如果你的站点不准备支持Safari或Android，那么忘了......查看更多>>

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