ghostcode

确保网页在IE6、IE7下的表现:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

ghostcode

优缺点：

• 在HTML中添加base64编码图片不会被缓存
• 在css中添加base64图片放在css文件中，因为css会被缓存
• base64图片不需要一次HTTP请求，从而可以获得一点性能提升。
• ie7以及更早版本不支持base64编码图片。

使用场景：

• 图片不能与其他图片以CSS Sprite的形式存在，只能独行

ghostcode

水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录两个用display:flex实现的方法：

第一种：

html

ghostcode

使用GeoLocation API获取地理位置：

navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
    alert(location.coords.latitude);
    alert(location.coords.longitude);
    alert(location.coords.accuracy);
}

ghostcode

• http://html5hub.com/html5-picture-element/
• http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
• http://picture.responsiveimages.org/
• http://www.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
• http://www.mobify.com/mobifyjs/

ghostcode

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
• http://html5please.com/
• http://www.html5rocks.com/en/mobile/responsivedesign/
• http://www.smashingmagazine.com/guidelines-for-mobile-web-development/

ghostcode

Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

页面上写：

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />

会报如上的一些警告。

解决方法：(逗号替代分号，分号在html中代表结束)

ghostcode

querySelector 和 querySelectorAll 方法是 W3C Selectors API Level 1 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 支持情况：目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

它们俩是有区别的：

1. querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素（nodelist）；
2. 在都没有满足条件的元素情况下：querySelector返回__Null__，而querySelectorAll返回空的数组__[]__；

记住：jquery与它俩是有区别的

ghostcode

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

减少网络请求，使用下面：

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}

ghostcode

/* All Smartphones in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in landscape ----------- */
@media only screen