手机网页制作教程

发表于2015-05-02 14:34:12| --次阅读| 来源webkfa| 作者小猪仔

摘要：手机网页制作教程

手机网页制作和PC的网页制作其实差不多，要注意几个问题就行

1.先介绍手机网页开发工具吧,也就是html5开发工具,那就是HBuilder

HBuilder.windows.4.0.0.zip下载地址

		html5代码
	

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>hello world</title>
    <script type="text/javascript">
    	function helloworld(){
			alert("hello world!")
		}
   		document.addEventListener('plusready', function(){
   			alert("welcome to Html5plus!");
   		});
   		
    </script>
</head>
<body>
	This is a show “helloworld” 
	default page,your can click this button
	<button onclick="helloworld()">click me!</button> 
	to show a "hello world" message!
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>hello world</title>
    <script type="text/javascript">
    	function helloworld(){
			alert("hello world!")
		}
   		document.addEventListener('plusready', function(){
   			alert("welcome to Html5plus!");
   		});
   		
    </script>
</head>
<body>
	This is a show “helloworld” 
	default page,your can click this button
	<button onclick="helloworld()">click me!</button> 
	to show a "hello world" message!
</body>
</html>

下面来解释下这个简单的html5手机页面

<!DOCTYPE html>

这行主要是html5的新写法，引入html标准

html5设置页面为utf-8语句很简单

上面这行非常重要，如果网页是放到手机上面运行的话，就一定要加上这行

这行的主要作用是适配页面在手机上显示比例

如果不加这行，页面在手机上打开字和图都会很小，加上就不一样的

initial-scale=1.0这个是说在手机100%显示页面

initial-scale=0.5的话就缩放50%显示页面

user-scalable是设置页面在手机是否能放大no就是不能，yes就是能

maximum-scale是能放大到多少，要用这属性，user-scalable=yes才可以生效