代码改变世界

让HTML页面缩放适应移动客户端尺寸

2015-02-01 11:50  咒语  阅读(1215)  评论(0)  编辑  收藏  举报

多的不说了，直接看代码吧

<html lang="en">
<head>
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<script type="text/javascript">
	var w =  screen.width;
	var rate = "0.55";
	switch(w){
				case 320:
                case 640:
                    rate = "0.5";
                    break;
                case 365:
                case 720:
                case 375:
                case 750:
                    rate = "0.585";
                    break;
                case 414:
                case 1242:
                case 1080:
                    rate = "0.64";
                    break;
                default:
                    rate = "0.55";
                    break;
	}
	document.write("<meta name='viewport' content='width=device-width,initial-scale="+rate+", minimum-scale=0.2, maximum-scale=1, user-scalable=no'>");
	</script>
	<meta charset="UTF-8">
	<title>DEMO</title>
	<!-- atwind | ChaosStudio http://cszi.com -->
	<link rel="stylesheet" href="css/normalize.css">

　　。。。。

后面的就略掉了。