Raina

近期在研究一些多终端的东西，因为先接触了opera浏览器，所以就继续着之前的足迹，开始在operamini上进行了一些尝试，也发现了很多之前从来没有遇到过的东西，还有点好玩。也将自己最近的成果跟大家分享一下。

目前市场境况：

Opera Mini是一款挪威的Opera Software ASA制作的，是市场份额排名第二的移动端浏览器，作为世界上最流行的移动设备web浏览器，目前有超过大约两千万的用户。而且从opera mini打开的页面数量也可以看出，使用opera mini的用户数量也在不断的上升，下面的图例也可以反映出一些情况：

工作原理：

Opera mini浏览器之所以越来越受用户的青睐，他对于页面的解析也是一个方面，当用户通过opera mini对网页进行请求时，会将请求信息发送至服务器，经服务器处理成二进制后，最终反馈给用户，而这个过程极大的减少了带宽的使用。

在Opera Mini中页面可以使用handheld 样式表和CSS3中的 media queries来制作适合移动设备显示的样式，如果书写外联样式，可以采用如下写法：

<link rel=”stylesheet” href=”handheld.css” type=”text/css” media=”handheld” />

内联样式可以通过如下写法满足：

@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px) { }

同时自己在研究过程中也制作了部分demo供大家查阅，主要是css中的一些属性在opera mini中的支持情况。

测试用例：

大家可以通过Opera Mini Simulator进行相关页面测试http://www.opera.com/mini/demo/

默认情况下，opera mini会下载screen模式的样式文件，所以大家可以通过下面的使其以mobile view模式展示，设置Opera Mini–>Tools–>Settings–>Web pages–>Mobile View为checked时，Opera Mini才会下载handheld样式表。

以下是operamini不兼容的css列表：

• 不支持line-height属性

测试demo：www.rainaxin.com/operamini/line_height.html

• 对于字体支持不是很好

测试demo：www.rainaxin.com/operamini/font_size.html

• 不支持多背景图

测试demo：www.rainaxin.com/operamini/multi_bg.html

• 列表样式，列表样式中circle样式会解析成效方块，讨论的结果是因为太小，以至于不能绘成circle，所以解析成小方块。

测试demo：www.rainaxin.com/operamini/list.html

• text-shadow不支持radius（Works in Safari, Opera, and Konqueror）

测试demo：www.rainaxin.com/operamini/text_shadow.html

以上是对一些属性进行了测试，而在实际工作中，如果是专门针对移动设备设计页面，不会设计这么负责，不仅仅是因为其多终端对于css的支持不像web浏览器那么好，还有一个比较重要的是，移动端浏览器对于js支持也不是很好，所以设计的复杂页面，即使视觉展示可以达标，但是很多功能确不能正常使用，所以写这些的目的只是为大家提供一些参考，也希望大家可以提出自己的见解，一起分享。

更新于2009-09-25:
StatCounter的移动浏览器统计数据：

说起九寨沟这个地方，本来是计划去年的这个时候去的，没想回学校碰巧成都地震，所以所有的旅行就此取消，每天都是为了躲地震在奔波，也算是一个遗憾，所以今年的五一不回来，也是去看看久违的朋友们。

九寨的温度还是有点低，所以装备上加上毛衣之类的厚重衣服，再加上一些杂七杂八的，箱子就已经接近满了。到达成都感觉还是蛮亲切的，一切都还是挺熟悉的。算上坐车的时间，旅游一共花了4天时间，这次没有跟团，自助游，因为总觉得跟团没有玩的乐趣，玩的时间也很有限，不能尽兴。第一天长途奔波后，终于到了九寨沟，给我的第一感觉就是，这里好干净，干净的让人的心情都是愉悦的，空气也很清新，从进了九寨沟到出九寨沟没有发现一丁点的垃圾，整个环境被保护的很好，真的是所有见过的景区最天然的区域。

去九寨的路上：

第一天来到九寨：

第一游：

九寨沟的旅游线路呈一个丫字形，第一天我们游的是日则沟，直至原始森林。第一天很早就起床了，为了是赶在8点前到达所要游的第一个景点—镜海，这里才算是在九寨沟第一次看水，真的像是一面镜子：

可能是早晨山里含氧量比较低的缘故，而且海拔也有点高，所以早上我的高原反应比较严重，走几步就已经感觉没法呼吸，看我在使劲的呼吸就知道是怎么回事情了，呵呵：

所以，我们还是重新乘车上去直至原始森林，原始森林这里的负氧离子是城市的400倍，所以给人的感觉真的是好清新，加上刚才的高原反应，就感觉进入了另外一个地方，使劲的进行呼吸，希望吸完这里的空气，这里感觉就只有在电视里面可以看到这种环境，朽木，植被都给人不一样的感觉，看看我就知道了，这么high：

走出原始森林，我们就一直沿着栈道下行，每一处风景都很迷人，从箭竹海到熊猫海，到珍珠滩瀑布，很多景区都让人印象深刻，看看吧：

唯一遗憾的是，第一天下午下起了雨，所以在去往另外一个山丫的时候，等到了长海之后，我们没有停留就直接坐车回到沟口，也算结束了第一天的旅游，但是第二天，天气好，弥补了第一天的遗憾，呵呵。

第二游：

第二天进沟，要重新买票，刚开始觉得有点亏，但是后面还是挺值的，第一站先去弥补第一天的遗憾，直达长海，长海被称为是九寨沟第二大海，还有老人柏，虽然这个老人柏有点让人失望，他们说我俗，俗就俗吧，我偏要在这个石碑上面照片，呵呵，而且这里还可以看到雪山……

接着是这条丫剩下的另外一个景点，就是五彩池，虽然有点小，还是有点看头的。

剩下的一条线路就是九寨沟的主线道了，这里我们决定徒步游完所有的景点，因为这里也是九寨沟景区比较集中的地方，看片片吧：

在两天的奔波中，九寨沟之旅也接近结束了，两天的玩很满足，不满足的是吃的，一个这么大的景区，竟然找不到什么可以入口的东西，东西也超级贵，所以就这点不爽，整体感觉很happy了，大家有机会还是可以去游的，很值得的。真的是林中有山，山中有水，水中有明镜，一切都是大自然孕育的。

几天的旅游就结束了，九寨沟之行就结束了。

经过长思想斗争后，还是决定放弃香港一行，跟随组员一起去江西婺源领略传说中的油菜花以及瓷都景德镇，虽然这个时节正式油菜花败的时候，但是一路上还是会零零落落的看到一些黄，也算是赶上它的末季吧。

此次出行一共花费了不到4天时间，除去路上的开销，真正玩的时间其实只有1天左右，因为临时调整了游玩顺序，所以第一站去往的是婺源，这里就是由不同的村落组成的一个个拥有不同特色的景区，但是大部分也已经失去了原有的风貌，更多的是具有浓厚的商业气息。

晓起：

第一站是被称为中国别具韵味的古文化生态村，整个下来给我印象最深的就是樟木，每一个角角落落都摆有各式各样樟木雕刻成的小东西，但是确吸引不起你去仔细的欣赏，因为这里没有感觉到一丝古文化生态村的气息，每条小巷都挤满了人，所以只想跟着导游快速的走完。中午就餐是在村长的家里，喝了一点糯米酒，有种很纯的味道，总算是除了樟木，记住的第二样东西，照片的拼凑也算是可以感受到一丝绿意…

江湾：

第二站是江湾，被誉为婺源的东大门，这里标志性的应该就是保留了古老的徽派建筑以及东和门、水坝井等公共建筑物，除了欣赏，没有其他任何游玩的价值，所以我们都是很快的过下场就出来了。

我自己：

李坑：

第三站李坑，这里才让人感觉到这次旅游的价值，确实有小桥流水，整个村落的布局让人有一种回归自然的感觉，越往里面走，人越少，有鸟叫声，在幽静的一些错落有致的院子里，还会看到一些人在专心致志的写生，很恬静。

丝溪延村：

第四站，也是在婺源的最后一站，丝溪延村，这里也是自认为比较有价值的一个村落，因为这里跟其他的3个村落都有不同之处，站在房屋中间，确实会感到一种阴森，如果是一个人的话，估计还是会有一丝害怕，这里也就是拍过聊斋的地方，同时乡村客栈也是在这里附近拍摄的，所以总会勾起人们的一丝想像空间，而且还看到聊斋中说的那扇门，那个声音很真实。

景德镇：

第二天逛景德镇，又是遇上下雨天，让旅游的心情降了一些，进入瓷都，第一眼看到的就是路边的路灯，柱子都是用瓷器做成的，确实跟其他地方的不一样，一个标志性的建筑就是那个火焰，象征着熊熊烈火，到达目的地确让人有点失望，跟自己想象的不太一样，这个地方算是有点偏的，除了一排瓷器店，其他的没有了。唯一让人气愤的是，这里的店员有的素质不怎么样，砍价难砍，想问她东西，她还爱理不理，斜视人，不同店员不同价钱，悬殊差距之大，明摆着欺负游客，但是也没有办法，忍吧！

在很不情愿下，又被载回了九江火车站，这趟旅游也到此结束！

主题：四月腾讯广州专场招聘会

时间：2009年4月26日 (10:00~12:00 13:30~16:00)

地点：广州市天河路603号广武酒店2楼会议室

ISD Webteam涉及岗位：交互设计师、视觉设计师、页面重构工程师。

看到这篇日志时，如果你愿意花上10分钟，整理一下你的简历和最棒的作品，邮件至webteam@qq.com，请注意邮件标题格式：“[广州现场招聘]＋岗位名称”，如“[广州现场招聘]交互设计师”，这将有助于我们提高工作效率，我们会非常感激。

如果没有时间整理，也没问题，4月26日，带上你自己，来吧！

广武酒店，到达指引：

地铁可乘坐“3号线到岗顶站”下车，A出口直行约80米；

公车177、33、549、248、224、194、522、235、266、272、298、515、50、18、22、210、234、242、561、269、296均可直达“岗顶站”。

更详细的介绍，可以浏览这个网页：http://hr.tencent.com/pages/scene/live_20090414.shtml

前段时间看了一本书，名字是“google是如何控制世界的”，读完后，给我最大的感受就是不管是一个人还是一家公司，最重要的就是一条长线的一个思维，还有对于某些事情的坚持以及处事态度，洞悉全球人民的心理，发觉人类内心的需求，提供给他们最好的服务，这才是服务行业给人的压力，让你无法拒绝，这个就是他们最终需要达到的目的。

里面自己最欣赏的一句话就是“成功的关键是在合适的时间出现在合适的地方”，这句话其实蕴含了很多东西，首先在合适的时间，是一个人对于这个度的把握，而合适的地方是这个人的一个敏锐的洞察力，要融合这两点才能说具备了成功的一个关键因素，而剩下的东西就是成功中必备的一些因素的了，其实google可以做到现在这么大，也是因为他在合适的时间，抓住了用户的心理，也就是很好的把握住了这个契机，而不像其他一些比google更先接触互联网的企业，中途的误判转去一个大众化的路线，从而也可能损失了一些在现在来说可能很有发展潜力的东西，google取胜的还有一个原因就是他的态度，以及他的坚持还有他的精，所以他不仅把握中关键因素，同时也具备这些基本因素，其实这些都是我们每个人值得学习的一个地方。

扩展到平时的工作以及生活中，我们一样需要这种精神，很多人可能会因为周围环境因素的影响而放弃很多东西，或者被误导，但是最重要的就是自己的一个态度，还有那种敏锐的洞察力，在这个过程不断坚持，将一切做的更好，也许你会发现很多意想不到的东西。

最近分享了一个主题，是关于连续字符自动换行的问题，这个现在来说已经很普遍了，几乎每天都会遇到类似的问题，但是目前来说还没有很完美的css实现各个浏览器都兼容的方法，在某些浏览器中也只能采取极端的解决办法。

在ie6/7以及以Webkit为核心的浏览器中，可以配合word-break:break-all;word-wrap:break-word;两个属性实现换行，只所以通过这2个属性的，是因为word-break:break-all;属性无法解决IE6/7浏览器中连续英文标点符号的换行。

但是在Firefox、opera以及ie8RC1中，仍然不支持此属性，目前也只能通过overfow:hidden;将超出固定容器的字符截断。这些都是针对div以及p之类的块集元素的，如果在table中需要实现同样的效果，除了需要对table做一个特殊的处理外，其他的支持跟上述提到的一样。

因为在table布局中拥有一个默认的属性table-layout:auto;而这个属性是基于table中文本内容进行计算的，显示比较慢，它通过读取table中每一个单元格的内容后才进行显示。所以默认情况下，就算是用上面的方法也不能实现table下面连续字符的自动换行。所以就需要针对这种情况设定一个table-layout:fixed;属性值，这个属性值刚好相反，是固定布局，跟内容无关，只与table中单元格的间距，table的宽度以及边框的宽度等水平布局元素有关，通过设定这个属性在结合上面的方法就可以实现table中连续字符自动换行的效果。

下面是几篇关于未来游览器的发展的文章：

word-wrap was supported by Firefox 3.1 alpha2
-ms-word-wrap Attribute | wordWrap Property
Microsoft CSS Vendor Extensions

关于图片垂直居中的问题，之前的一篇文章做了一些简单的介绍，但是之前的解决办法，在受到某一些元素的影响后，ff中显示会有差异，这个就是浮动带来的困扰。针对这种情况，跟一位同事进行了矫正，通过另外一种方法实现图片垂直居中，以下是这种方法相关的html结构：

<div class=”img_wrap”>
<img src=”images/RED_0099.JPG” alt=”rainaxin” />
</div>

对应的css代码如下：

显示效果如下：

这种方法实现的原理，就是将图片模拟成文字形式，通过行高控制图片的垂直居中，使用了伪类的写法，解决ff下面不能垂直居中的问题，大家可以参考下。也许不是最完美的办法，但是也会给大家平时的工作带来一些帮助！

  博客被好多人说过了，一直怂恿我改WP程序，现在终于抛弃之前的，改用WP程序了，今天正式上线，功能还是比较强大的，插件可以随便用，但是大部分还没有什么研究，有时间可以慢慢研究下。

    前几天也整了一个国外的服务器空间，同事介绍的，顺便把站点迁移了过来，强大，算是给自己的站点换上一套新的装备吧，娃哈哈……

    吃饭，大家是再熟悉不过的事情，其他事情或许某一天可以暂时忘记，但是吃饭确实每天需要挂在嘴边的，俗话说“人是铁，饭是钢，一天不吃饿的慌”。但是如何让大家吃的好，而且吃的满意，这里涉及到东西真的是不容忽视。

    记得前段时间，下班后都喜欢去5楼吃饭，但是让我记忆深刻的两件事情引起了我对这个效率和流程化问题的思考。第一件事情是这样的：

    我们大概有7-8个人点餐，其中点了2份大碗饭，还有2份一样的叉烧滑蛋餐，要求是一个现吃，一个打包。记单人员单子也很清晰的记录了我们的需求。但是算钱的时候，无故多了钱，刚开始以为是服务人员算错了，就没在意。中间的过程是这样的，当一份叉烧滑蛋已经上了之后，紧接着一名服务员端了一份叉烧滑蛋上来，我们达到错了，这份是打包的；过了不到2分钟第二名服务员又端了同样的餐上来，我们将刚才的话重复了一遍，很无奈；又过了不到2分钟，第三名服务员再一次端着同样的餐上来，我们在有点失望的再一次重复了那句话，强调了要打包。总算，没有了第4次。但是一件比较严重的事情，还差一份饭，最后发现多出的钱刚好是差的那份饭，确认了下，果然是这样。

    第二件事情是这样：

    我们还是去同样的地方点餐，但是点了一次，服务员很熟练的回答“没有了”，再点另外一样，还是同样的回答，再第三次，依然，最后接近无语点了再平常不过的，中间的对话让人有点不耐烦。

    从上面的两件事情上，我总结出下面的观点，如果说将这个餐厅比喻成一个完整的项目，每一位服务人员是项目中的核心成员，点餐的人是项目最终输出的效果评估人员，送餐的过程是项目制作的过程。

    那么我们就可以这样来说，第一件事情涉及到项目执行的流程问题，流程比较混乱，效率低下，项目人员之间缺乏一定的交接以及沟通，这样导致同一件工作被重复制作，尽管这件事情是错误的，这样不仅损失了人力资源，耗费了项目制作的时间，延误了项目的进度，结果导向就是客户导向，客户不满意，虽然每个项目人员很努力的工作，也就是说能力没有用在合适正确的地方。偏离了原有的轨道。所以第一件事情教会我们要重视项目的整体规划，细化流程，明确分工，透明沟通，最终达到一个正确的结果导向。

    第二件事情我觉得涉及到的是一种隐式的欺骗，写出的就应该是有的，存在的，可以实现的。这中情况表现在项目中就是前期需求没有分析明确，提出了很多想法，但是到最后才发现原来不可实现，结果导致只能选择最基本的去实现。这个其实也耗费了项目完成的时间，降低了效率。所以这件事情教会我们，要清楚自己想要的，要了解周围的资源。

    废话谈了这么多，并不是吹嘘，只是有感，希望可以起到抛砖引玉的作用，生活中很多细小的事情都是自己工作的一面镜子，不经意间你就会发现很多东西~~

    前几天遇到一个问题，是图片经常会被多次下载而且还是返回200码的问题，说明图片根本没有被cache住，每一次都需要重新拉取图片，如果图片小一些倒还好，但是如果图片比较大的话还是比较耗资源的。最后经过跟朋友沟通，说可能是ie下面的一个bug。

    如果使用innerHTML进行输出会导致图片不能被cache住，可行的做法就是预先拉取图片，然后通过通过js的一个setTimeout函数设置一个等待时间，再进行innerHTML，这样可以暂时解决这个问题。

匹配的HTML结构为：

    像这样，先拉取download.jpg图片文件，然后setTimeout一下，再进行innerHTML。

    其他的关于图片不能被cache住的原因也不是很清楚，不知道大家有没有其他的什么看法，可以放进来分享一下，谢谢！