码迷,mamicode.com
首页 > 移动开发 > 详细

手机网站开发-viewport-按照手机尺寸显示页面

时间:2014-12-01 16:04:07      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:android   style   io   ar   color   os   使用   sp   java   

最近在写手机网页,总结两个方法


1. 网页宽度可固定为640px,然后使用viewport实现页面在不同手机页面显示

   

 网页中插入script代码

<script type="text/javascript">
	if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
		var version = parseFloat(RegExp.$1);
		if(version>2.3){
			var phoneScale = parseInt(window.screen.width)/640;
			document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
		}else{
			document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
		}
	}else{
		document.write('<meta name="viewport" content="width=640, user-scalable=no">');
	}
</script>

  2.按照百分比切图

    

    页面中加入<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


  


手机网站开发-viewport-按照手机尺寸显示页面

标签:android   style   io   ar   color   os   使用   sp   java   

原文地址:http://blog.csdn.net/yixiao_naihe/article/details/41647715

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!