html5+css3开发总结

meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
height: viewport 的高度 （范围从 223 到 10,000 ）
initial-scale: 初始的缩放比例 （范围从>0到 10 ）
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放

通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭
<meta name="format-detection" content="telephone=no" />

表格(table)的响应式处理:
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}

@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}

css3属性备忘：
-webkit-border-radius:0;
-webkit-appearance:none;
background:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#fdfdfd));
background:-webkit-gradient(linear, center top, center bottom, from(#f9f9f9), to(#eeeeee))

背景渐变：
.gray_bg{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFEDEDED,endColorstr=#FFFFFFFF);
background:#EDEDED; /* 针对不支持CSS3和滤镜的浏览器，只能来个单色了 */
background:-webkit-linear-gradient(top, #EDEDED, #FFF);
background:-moz-linear-gradient(top, #EDEDED, #FFF);
background:-o-linear-gradient(top, #EDEDED, #FFF);
background:-ms-linear-gradient(top, #EDEDED, #FFF);
background:linear-gradient(top, #EDEDED, #FFF);
background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}

去掉手持设备点击时出现的透明层 （一般会在头部做格式化）
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
在应用了此属性时，链接的active属性会实效，解决的方法是，在页面unload时运行document.addEventListener("touchstart", function(){}, true);使active状态可用。（注：在小米系统下，点击链接仍然会出现红色的边框，各位同学如有解决方法，请赐教，不胜感激。）

HTML5游戏前端开发秘籍:
1.游戏适配各种各样机型的分辨率
.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
然后background-size:cover;让背景覆盖全屏，此代码可以使背景 自动缩放 至 覆盖 容器大小。
然后内部的元素根据其所接近的边来做动态布局，下面是一个例子：
.runbox {
position: absolute;
bottom: 110px;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 10px;
}

html5+css3布局技巧：

 

1.利用css3边框背景属性
-webkit-border-image
2.学会使用webkit-box
-webkit-text-size-adjust:none;禁止浏览器默认会根据当前屏幕和内容作调整.
3.如何去除Android平台中对邮箱地址的识别
看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中
<meta content=”email=no” name=”format-detection” />
4.如何去除iOS和Android中的输入URL的控件条
能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
5.如何关闭iOS中键盘自动大写
移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
6.iOS中如何彻底禁止用户在新窗口打开页面
有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。
7.iOS中如何禁止用户保存图片＼复制图片
我们在前面提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。
8.iOS中如何禁止用户选中文字
我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。
9.iOS中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？ 通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
10.如何解决盒子边框溢出
当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。
11.如何解决Android 2.0以下平台中圆角的问题
如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。 在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角： 1＼-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）； 2＼如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。 3＼假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！
12.如何解决android平台中页面无法自适应
虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签： 1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;” /> 如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！
13.如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式
新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。 1 <meta name=”format-detection” content=”telphone=no” />
我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写： 1 <button class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>元
14.css3旋转：
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;

CSS3 响应式图片

CSS实现在普通屏幕上使用图片banner.png为背景，在retina屏幕上显示更高分辨率的图片作为背景:

background-image: url(banner.png);
background-image: -webkit-image-set(url(banner.png) 1x,url(banner_retina.png) 2x);

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */