关闭

网页webview适应手机分辨率

标签: webview 自适应 android
539人阅读 评论(0) 收藏 举报
分类:

主要原理是在服务器端,根据不同的手机分辨率,设置不同的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/

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25324次
    • 积分:590
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:0篇
    • 译文:0篇
    • 评论:21条
    最新评论