CSS3 Media Query实现响应布局

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局)。

Continue reading CSS3 Media Query实现响应布局

chrome developer tool 调试技巧

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.

Continue reading chrome developer tool 调试技巧

移动平台的meta标签

对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?

1、Meta 之 viewport

说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?
viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域
。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?我们来看一下如下布局在iPhone上的显示情况

Continue reading 移动平台的meta标签

浏览器对\u0000的不同解析

\u0000是unicode表示的一个特殊字符,也就是二进制的0,在c里面用这个字符作为字符串结束的标志。
正是因为这个原因,造成调用某些方法的时候字符串被截断。
有这样一个字符串
\u0000B\u0000E\u0000Q\u00007\u00008\u0000Q\u00004\u0000A\u00000\u0000G\u0000A\u0000I\u0000X\u0000F\u0000F\u0000F\u0000X\u0000H\u0000\r\u0000
chrome和firefox输出的是BEQ78Q4A0GAIXFFFXH;ie得到的就是空.
Continue reading 浏览器对\u0000的不同解析

一句话实现网页输入框可进行语音输入

语音输入也有了好一阵子了,但似乎还没看到相关的关于html网页上如何实现语音输入的文章,今天无聊查了点资料,发现原来实现是这么简单,可能是因为大家都着觉得太简单了,所以就没有人讨论了吧。

其实要实现网页中的语音输入只需一个代码便可实现:x-webkit-speech

大家看到这个代码,会联想到了什么?对,这代码说明语音输入只支持webkit内核浏览器。

Continue reading 一句话实现网页输入框可进行语音输入

透明PNG在IE6下的官方解决方案

做Web开发的朋友一定都知道PNG是一个相当不错的图片格式,但是这个好的格式却在IE6时代造成了麻烦,IE6会使透明的PNG的透明部分出现#DBEAED的色彩。透明不了。使得在FF下开发表现很好的界面换成IE浏览就惨不忍睹,又逼着换成GIF,而GIF的假透明在变换背景时造成毛边现象。

刚去了www.gowindowslive.com去生成一个WLM的联系方式图标,结果发现的官方的解决方案。;)

/* 
Correctly handle PNG transparency in Win IE 5.5 & 6.
Copyright 2007 Ignia, LLC
Based in part on code from from http://homepage.ntlworld.com/bobosola.

Use in  with DEFER keyword wrapped in conditional comments:


*/

function fixPng() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])

  if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
    for(var i=0; i 0) {
        var width = img.width;
        var height = img.height;
        var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image"; 
        img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
        img.src = "images/blank.gif";
        img.width = width;
        img.height = height;
        }
      }
    }
  }

fixPng();

Continue reading 透明PNG在IE6下的官方解决方案

[开发技巧]用div挡住flash,给flash加上链接(兼容ie+firefox,具备a链接所有属性)

问题描述:公司合作的一个酒店预订网站需要在页面上投广告,但对方给了一个flash文件,要求链接到其首页。直接在html的flash object前面加上<a href=…>,发现链接是点不动的。

解决过程:
开发人员没有意识到这个问题,写出的问题代码如下:


    
        
        
        
    

鼠标放上去是没有任何效果的,原因是默认情况下flash会被放到最高层,可能有朋友也碰到过下拉菜单被flash挡住的情况,也属于这个情况。
Continue reading [开发技巧]用div挡住flash,给flash加上链接(兼容ie+firefox,具备a链接所有属性)

iPad网页开发教程及规则

iPad开发的局限性

  1. 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现这样做并不方便,给用户带来的感受并不十分好。
  2. 不支持Flash在没有越狱的iPad Safari中,网站的Flash都是无法显示的,但可以通过第三方软件或插件或者浏览器来解决,不过,即使不能显示Flash,你一样能够用HTML5和CSS3实现同样的效果。
  3. 没有鼠标光标这意味着鼠标属性,例如鼠标悬停属性是不可能有的。

    你或许可以为这个找到一些变通的办法,但是到你的用户那里这些该如何工作将会是困难的事。

  4. 滚动条不能按照预期那样起作用滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外,滚动过程中需要两个手指的手势。(我们将在下文中进行充分的讨论)
  5. 不支持CSS固定布局HTML 元素 position:fixed CSS属性不能正确显示,常常会使得页面停留在第一屏,无法向下翻页、放大缩小。

Continue reading iPad网页开发教程及规则

推荐7款国产的在线HTML编辑器

在线HTML编辑器或者是基于浏览器的所见即所得的HTML编辑器广泛用于各种类型网站的文章发布、论坛发贴等功能。例如在oschina网站上发帖、写博客、提交新闻、添加开源软件等处都会用到这种编辑器。

目前有非常多非常优秀的在线HTML编辑器,而且这些编辑器大多数都是开源的,而国产的编辑器也已成熟,雄踞一方,本文罗列一些非常优秀的出自国内程序员之手的HTML编辑器,如有不足请大家补充,请看具体列表(排名不分先后顺序):

KindEditor

KindEditor可以说是目前最为优秀、成熟的编辑器,加载速度非常快,文档全面,支持扩展开发,为众多网站所使用(本站也部分采用了KindEditor编辑器,将来将会全面使用)。

Continue reading 推荐7款国产的在线HTML编辑器

返回顶部