h5干货

1.reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration: none;
}

@media  screen and (min-width:768px){
	html{font-size: 80px!important;}
}
@media  screen and (max-width:767px) and (min-width:414px){
	html{font-size: 54px!important;}
}

@media  screen and (max-width:413px) and (min-width:375px){
	html{font-size: 50px!important;}
}
@media  screen and (max-width:374px) {
	html{font-size: 40px!important;}
}

*{
    /*阻止长按图片之后呼出菜单提示复制的行为*/
    -webkit-touch-callout:none; 
    /*禁用Webkit内核浏览器的文字大小调整功能。*/
    -webkit-text-size-adjust: none;
    /*避免点击a标签或者注册了click事件的元素时产生高亮*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*禁止用户进行复制.选择.*/
    -webkit-user-select: none;
}

/*解决ios input无法输入*/
input,textarea{
	-webkit-user-select:text !important;
}

2.meta标签

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。