网页webview适应手机分辨率
Posted 台风中的橘子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页webview适应手机分辨率相关的知识，希望对你有一定的参考价值。
主要原理是在服务器端，根据不同的手机分辨率，设置不同的css样式
1、在网页head里面添加：
<meta name="viewport" content="width=device-width, user-scalable=no" />
2、不同分辨率设置不同css(同样是在head里面添加)：
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="h1.css" />
< link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.3)" href="h2.css" />
< link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="h3.css" />
< link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="h4.css" />
< link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 3.0)" href="h4.css" />
body中加一张图片作为测试
<body>
<img src="2010031617222440.jpg" />
< /body>
3、css文件测试内容(若设置width: 100% 可以自适应所有手机宽度)
h1.css文件:
img
width: 225px
h2.css文件:
img
width: 265px
h3.css文件:
img
width: 305px
h4.css文件:
img
width: 345px
h5.css文件:
img
width:385px
附:手机分辨率对应的所有手机参考：http://bjango.com/articles/min-device-pixel-ratio/
以上是关于网页webview适应手机分辨率的主要内容，如果未能解决你的问题，请参考以下文章