您的位置：首页 > 运维架构 > 网站架构
关于移动网站网页的基本代码结构和一些移动网站开发建议

2013-07-18 16:50 686 查看
做成码农，我直接以代码形式来作为这篇文章的主要内容吧。
<!-- 文档类型的定义，HTML5已经简化了定义方式，不区分大小写，使用小写也是可以的。 -->
<!DOCTYPE html>
<html>
<head>
<!-- 指定当前页面的字符集。 -->
<meta charset="UTF-8">

<!-- 虚拟窗口（视口Viewport）的定义：强制让该页面的宽度与设备的宽度保持1:1，最大/最小宽度的比例都是1.0，禁止用户点击屏幕放大浏览。 -->
<!-- 各位看官可以试试把这一项设置去掉以后，看看你制作的页面在手机上是个什么样子，喜欢深究的同学可以具体研究下viewport其他的一些属性设置含义。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<!-- iphone私有标签，允许全屏模式浏览（可选）。 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- iphone私有标签，指定safari顶端状态条样式（可选）。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 禁止将页面中的数字识别为电话号码（可选）。没有此项设置，ios会把页面的数字都默认成电话号码，点击之后会到拨打电话界面，如果页面中有电话好吗，需要点击即可拨打的，可以使用<a href="tel:XXXXXXX">XXXXXXXX</a>,发短信使用<a href="sms:XXXXXXX">XXXXXXXX</a>。 -->
<meta name="telephone=no" content="format-detection">

<!-- 更多Meta标签的定义（可选）。 -->
<!-- 类似于Keywords、description以及一些私有标签的定义，有兴趣的可以参照相关技术性文章。 -->

<!-- 页面标题，这个不用多说，大家都懂的。 -->
<title>移动网页的基本结构</title>

<!-- 引用外部css文件。 -->
<!-- 整个页面的公共基础CSS样式定义文件。 -->
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<!-- 当前页面引用的样式定义。 -->
<link rel="stylesheet" type="text/css" href="/css/index.css" />

<!-- 如果需要进行适配样式操作，请使用CSS3的媒体查询机制来判断加载不同的CSS文件，以屏幕宽度的适配为例。 -->
<!-- 屏幕宽度小于479px使用csstest1.css中定义的样式。 -->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="/css/csstest1.css" />
<!-- 屏幕宽度小于639px大于479px使用csstest2.css中定义的样式。 -->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 479px) and (max-width: 639px)" href="/css/csstest2.css" />
<!-- 屏幕宽度大于639px使用csstest3.css中定义的样式。 -->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 639px)" href="/css/csstest3.css" />

<!-- 关于页面适配时，开发过程中请不要使用固定宽度的布局方式，建议使用流式布局方式（百分比布局方式），网页基本字体字体大小使用px定义，其他的字体定义请使用em来定义。 -->

<!-- 引用外部js文件。 -->
<script type="text/javascript" src="/js/jquery-1.7.2.min.js" />
<script type="text/javascript" src="/js/index.js" />
<script type="text/javascript">
// 页面加载完成后去除浏览器URL输入框（页面内容不满一屏时，不会自己去除）
addEventListener("load", function() { setTimeout(scrollTo, 0, 0, 0); }, false);
</script>
</head>
<body>
<!-- 页面的固定头部区域。 -->
<header class="t_eader">

</header>

<!-- 页面主导航区域，因人而异，有的网站不需要。 -->
<nav>

</nav>

<!-- 正文区域，看各人的需求进行填充内容了。 -->
<!-- 以下是一些注意点，列的不全面，有兴趣的筒子可以参考博客园个人博客：http://www.cnblogs.com/iamjiuye/或者开源社区个人空间：http://my.oschina.net/iamjiuye，其中有关于移动网站的设计的一片文章和响应式设计的一些理论知识，开博不久，文章才几篇，后续会加油写的，欢迎来访！！！ -->
<!-- 移动网站的交互方式要尽量避免水平滚动的交互方式，以竖直排列为主要模式，水平滚定在技术实现上有一定的难度，而且与用户惯性操作也不符合。 -->
<!-- 页面正文部分，请尽量使用HTML5语义化标签进行操作。 -->
<!-- 非阅读类页面请尽量减少文本字数，用户并不是每一个人都是喜欢大段大段文字的，更何况手机屏幕就那么点大，满屏文字会让用户失去兴趣。 -->
<!-- 页面需要使用清晰的字体，以320px宽度的屏幕来说，主要字体不要小于14px，辅助字体不要小于12px。 -->
<!-- 点击区域请尽量不要小于40px * 40px。 -->
<!-- 图片的适配和优化操作请结合CSS3媒体查询机制、HTML5的data-隐藏属性、JS操作共同处理。 -->
<!-- 列表页面，请尽量保持整个列表Item项目为一个可点击区域。 -->
<!-- 娱乐性操作方式，请尽量选用九宫格抽奖、刮刮乐、砸蛋等方式进行，类似于摇一摇之类的高级方式因为系统、浏览器的硬件要求不一样，可能并不是所有移动设备都能满足期望的需求效果。 -->

<!-- 页面的固定尾部区域。 -->
<footer>

</footer>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航