移动端项目常用html头及css整理

WindySky 2017-09-27

展开全文

使用rem布局（js动态改变根字体大小），兼容pc端，设计稿750px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述"/>
<!--360浏览器渲染模式优先级：极速/ie兼容/ie标准-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--ie8模拟专用：优先使用GCF渲染，否则使用最高版本的ie内核-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--禁止用户缩放-->
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<!--禁止自动识别邮箱、电话号码及地址-->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!--QQ浏览器私有-->
<meta name="x5-fullscreen" content="true"><!--全屏模式-->
<meta name="x5-orientation" content="portrait"><!--强制竖屏-->
<meta name="x5-page-mode" content="app"><!--应用模式-->
<!--UC浏览器私有-->
<meta name="full-screen" content="yes"><!--全屏模式-->
<meta name="screen-orientation" content="portrait"><!--强制竖屏-->
<meta name="browsermode" content="application"><!--应用模式-->
<!--360浏览器-->
<meta name="360-fullscreen" content="true"><!--全屏模式-->
<!--IOS私有：删除默认的苹果工具栏和菜单栏(即启用WebApp全屏模式)-->
<meta name="apple-mobile-web-app-title" content="添加至主屏幕后的标题">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!--favicon icon-->
<link rel="shortcut icon" href="app/statics/images/icon/favicon.ico" type="image/x-icon"/>
<link rel="bookmark" href="app/statics/images/icon/favicon.ico" type="image/x-icon"/>
<!--ios icon-->
<!--如果不想系统对图标添加效果，则使用rel="apple-touch-icon-precomposed"-->
<link rel="apple-touch-icon" sizes="60x60" href="app/statics/images/icon/apple-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="app/statics/images/icon/apple-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="app/statics/images/icon/apple-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="app/statics/images/icon/apple-icon-152x152.png"/>
<!--css-->
<link rel="stylesheet" href="css/common.css" type="text/css">
<style id="mycss"></style>
<script>
(function(doc,win){
	var docEl = doc.documentElement,
		mycss = doc.getElementById("mycss"),
		isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
		dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
		dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		docEl.dataset.dpr = dpr;
	var recalc = function(){
		var width = docEl.clientWidth;
		mycss.innerHTML = "";
		if(width/dpr > 750){
			width = 750 * dpr;
			mycss.innerHTML = "body{width:750px;margin-right:auto!important;margin-left:auto!important;}";
		}
		docEl.dataset.width = width;
		docEl.dataset.percent = 100 * (width / 750);
		docEl.style.fontSize = 100 * (width / 750) + 'px';
	};
	recalc();
	if(!doc.addEventListener) return;
	win.addEventListener(resizeEvt,recalc,false);
})(document,window);
</script>
<!--other js-->
</head>

相关文章：html头部常用<meta>整理

common.css

@charset "utf-8";
*{padding:0;margin:0}
html{
	font-size:100px;line-height:1;
	font-family:sans-serif,Microsoft Yahei;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
}
body,html{-webkit-overflow-scrolling:touch}
body{box-sizing:border-box}
a,body,input,input:focus,select,select:focus,textarea,textarea:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;-webkit-appearance:none}
li,ul{list-style-type:none}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
legend{display:none}
a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;-khtml-user-select:none;user-select:none;-moz-user-focus:ignore;-moz-user-input:disabled;}
a:active,a:hover,button{outline:0}
input[type=checkbox],input[type=radio]{box-sizing:border-box}
button,input[type=button],input[type=submit],input[type=reset]{border:0;cursor:pointer}
textarea{resize:none}