权记 » 浏览器

转载：支付宝浏览器与操作系统统计报告(2010.04)

小权 — Tue, 11 May 2010 05:54:56 +0000

支付宝注册用户已经突破 3 亿，2009 年网购交易额达到 2670 亿元 (via)，支付宝用户特征在一定程度上反映了中国电子商务用户的普遍情况。
基于支付宝网站流量统计数据，支付宝前端开发组最近发布了浏览器与操作系统统计报告。这份报告对电子支付行业以及所有互联网电子商务网站都具有现实意义。

>更大阅读窗口

原文：http://ued.alipay.com/2010/04/alipay-client-data-report/

为不同大小的浏览器视窗使用不同的样式表

小权 — Sat, 24 Apr 2010 11:26:12 +0000

同一个网站，访问它的浏览器可能会是不同的宽度，常见的有320px，480px，800px，1024px，1280px，1920px等，为不同大小的浏览器视窗提供不同的访问效果，提高用户的使用体验，同时网站本身也可以为不同受众提供不同的资源。

下面提供两种解决方案：

一、通过 W3C standard 来定义，例如：

上面的代码表示：当访问网站的设备浏览器宽度大于等于800px时，将使用800.css这个样式。

又如：

上面的代码表示：当访问网站的设备浏览器宽度在701px和900px之间时，将使用medium.css这个样式。

目前Mozilla， Opera和WebKit等浏览器的当前版本都支持这个标准，不幸的是IE浏览器并不支持此标准，包括IE8，以及IE9 Previous。

不要着急，方案二将解决此问题。

二、通过JQuery来动态调整页面样式
1、首先定义两个link，当然你也可以是一个，第二个是要更改的css

2、下面的JavaScript代码将根据不同的浏览器大小，更改css

unction adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

查看例子：

例子1 例子2 例子3 下载所有例子

英文原址：http://css-tricks.com/resolution-specific-stylesheets/

本地图片预览(支持IE6，IE7，IE8， Firefox3)

小权 — Tue, 12 Jan 2010 14:11:09 +0000

最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。

这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3，不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。

总结一下就是：

IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo：

<html> <head> <script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> </head> <body> <input type="file" id="picture" name="picture" size="35" value="" onchange="setImg(this)"/> <div id="preview_fake" style="margin-left: 50px"> </div> <style type="text/css"> #preview_fake{ /* 该对象用于在IE下显示预览图片 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); visibility:hidden; } </style> <script type="text/javascript"> function setImg(obj){ if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){ alert('图片格式无效！'); return false; } $("#preview_fake").empty(); var img = document.createElement("img"); img.setAttribute("src", ""); img.setAttribute("id", "preview"); document.getElementById("preview_fake").appendChild(img); if($.browser.msie){ if($.browser.version == 6.0){ $("#preview").attr("src",obj.value); }else{ var objPreview = document.getElementById('preview' ); var objPreviewFake = document.getElementById('preview_fake' ); var objPreviewSizeFake = document.getElementById('preview_size_fake' ); obj.select(); var imgSrc =document.selection.createRange().text; objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight ); objPreview.style.display ='none'; } } if($.browser.mozilla){ $("#preview").attr("src",obj.files[0].getAsDataURL()); } if($.browser.opera){ alert("暂时不支持Opera浏览器"); } if($.browser.safari){ alert("暂时不支持Safari浏览器"); } } </script> </body> </html>

Tips:You can change the code before run.

[10/01周主题] – Web 项目开发中的常见问题

小权 — Sun, 10 Jan 2010 08:32:40 +0000

这周来一直在赶一个Web项目，没多少时间focus到其他上面，于是这周的主题就干脆做个整理，整理下web项目开发时遇到的一些问题和解决办法。

本周主题：Web 项目开发中的常见问题

一、中文乱码

建议统一使用UTF8，或者全局做个filter处理。

二、表单校验

使用第三方校验框架，而非自己去写，可以减少很多工作量。

三、Ajax的使用

首页尽量少用ajax，页面初次加载时常会加载不上来，尤其多个Ajax实例同时运行。

四、UI 规范

UI最好是出Demo，跟客户确认，定终稿，然后开发按最终效果图实现页面最好，否则没有页面或者效果图，即使有统一的规范，还是会浪费很多时间去调UI问题。

五、浏览器的兼容问题

虽然IE6基本上淘汰了，可老机器上使用IE6的还是不少的，Css 在处理兼容问题时，建议分开处理，在页面进行浏览器version判断，读取不同的css，这样管理和调整起来都方便。

六、比较完整的测试数据

页面框架搭完了，看着效果不错，可是填完数据后会发现和想象的不太一样。

七、用JPA Or JDBC 与数据库交互

JPA与JDBC相比之下，使用JPA大大减少了编程人员的工作量，因此还是偏向使用JPA，特殊环境下再选择JDBC

中国移动的网站能不能再做的烂点呢？

小权 — Mon, 30 Nov 2009 04:42:27 +0000

我这里谈到的是中国移动北京分公司的网站，其他省市的网站没有去深入测试，估计是大同小异。

1、网站打开速度特别慢

不知道为什么中移动的网站打开超级慢，按理说中移动网站的带宽应该是没有问题的，但是不知为什么每次打开都特别慢，而且经常中断了，在不同的电脑上，不同的网络环境差不多，原因未知。相比之下看看人家中国银行的网站www.boc.cn(没有做广告的嫌疑，只是做个比较)，基本上瞬间打开，可能你会说静态网页和动态网页的区别，但是我觉得这不是根本问题，因为速度已经不是一个数量级上的差距了。有时接通10086，话务员查询时打开网站也很慢，让我听了很久音乐，可见中移动内部也是很慢的。下图是打开网站时的一个截图，四个页面有一个是中国银行的，其他三个都是中移动的，截图时间是打开后2分钟左右的样子，点击可看大图：

2、网站对浏览器的兼容性

说到这个，那是超级烂，由于很久没有使用IE5.5和IE6了，不知道中移动的网站到底对哪个浏览器的兼容性好，反正我在IE7，IE8，Firefox3.5，Google Chrome上访问都有问题，IE7和IE8好在还凑合能使用，Firefox3.5和Google Chrome简直就没法用，就连一个小小的个人网站都知道去解决网站对浏览器兼容性的问题，试想中国最大的运营商和全球最大用户群体的电信企业，网站对浏览器的兼容性做到如此之烂，过去几年了还不去优化，实在是没话可说了，只能尽量少去使用或者不用。

3、“满意100”

忘记了中移动什么时候开始喊这个口号的，但是这几个月来，中移动的服务别说100分了，60分都达不到，10086打过去，客服90%的时间全席忙，网站的在线客服也是90%以上时间满员，处于等待状态，等待就等待吧，还经常断线，再进去前面又插进去几个客户了，继续等待继续断线，无语了，我昨天为了体验这个“满意100”，花了半个多小时打10086，没有打进去，花了20多分钟进行网站客服的咨询没能成功，客户有问题，但是却无法联系中移动客服，这样的服务如何做到“满意100”呢？

4、可能你会说，中移动服务这么烂，你为啥还用啊？

我有选择吗？前几年就中移动一家独大，其他运营商的服务比移动还烂，从最近几年开始，状况好些了，其他运营商也发展起来了，可我的号码用了N年了，换个号码多不方便大家又不是不知道，要是可以携号转运营商，我立马转。

==欢迎发表意见，欢迎转载==