网页webview适应手机分辨率

原创 2013年12月02日 14:13:42

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

微信公众平台Java开发如何让网页自适应不同分辨率的手机浏

 在做微信公众平台开发的朋友应该会遇到这样的问题,开发的网页在不同分辨率的手机显示大小不同,不能根据分辨率的不同而自动调节大小,下面就告诉大家如何解决。 ...

android webview 电脑网页适应手机屏幕

我们平时在使用webview加载网页的时候可能出现网页超出屏幕的情况,特别是手机在加载PC网页的时候,基本上都会出现屏幕不适配的情况。网上搜一下大多是使用如下方法:webSettings.setUse...

WebView网页版的手机app

//Main.xml布局文件     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_p...

JavaWeb基础知识:Html和Css实战WebView实现手机显示网页

Day02 Html、Css实战和WebView实现手机显示网页1.html与css实战1.1 程序猿小网页 先来看一下效果图 编程用图如下 实现代码如下 ...

工作里程之二,手机app里面的网页--WebView

两年前从事的还是基于android底层的开发工作,那个时候要经常考虑android版本的问题,最大变化应该就是app应用里面的网页webview的变化。android4.4之前(不包括4.4)中的we...

Android在网页下(WebView中运用HTML)点击按钮打开本地手机应用程序

Android在网页下(WebView中运用HTML)点击按钮打开本地手机应用程序 最近在做一个Android项目 其中有个需求是在网页中打开本地应用 本来如果是自己项目的使用WebView的话...

运用@media实现网页自适应中的几个关键分辨率

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢? 先看下面的...

网页自适应屏幕分辨率

这是我写的一段让网页自适应屏幕分辨率的代码。贴出来,欢迎补充。 /** *让网页元素自适应所有的分辨率的脚本 *作者:wikies    1175551641@qq.com *时间:2014.02.0...

网页自适应不同浏览器和分辨率[转]

上网这么久,曾经不止一次地看到有些网站的首页上醒目地写着"请用Internet Explorer 4.0版本以上浏览器在800×600分辨率下浏览本网站"等字样的文字。可是,我的17英寸的彩显你不能总...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)