移动端页面模板

下面是移动端端的标准页面模板,移动端标准页面v1.0

如果页面需要在trs系统上线,页面模板需要注意以下几点,移动端标准页面trs版v1.0:

1.将html,css编码由uft-8改为gb2312
2.页面后缀名由 .html 改为 .shtml

移动端页面模板
/css -- 放css文件和图标字体
/fonts -- 字体文件放在fonts目录下
index.css -- 主要的css文件,包括样式重置
/images -- 页面用到的图片
/js -- js文件目录
/json -- 调用json文件存放地址,一般页面可以不需要
index.html -- 首页模板

index.html内容:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是移动端的页面模板</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" >
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!-- 主要内容 -->
<!-- js文件写在页面最底部 -->
<script>
</script>
</body>
</html>

index.css内容

/*css reset*/
@charset "UTF-8";
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"],input[type="button"],input[type="submit"],input[type="file"], textarea, button, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
/*page css*/