> 博客详情
http://my.oschina.net/lifj/blog/283346
ViewPager用的很多，主要用啦展示广告条。可是高度却不能自适应内容，总是会占满全屏，即使设置android:height="wrap_content"也是没有用的。。
解决办法其实网上有很多，但是个人感觉不是很好
比如：LinearLayout的时候，使用weight来自动调整ViewPager的高度。
一般的代码如下：
&LinearLayout&xmlns:android="/apk/res/android"
&&&&android:layout_width="fill_parent"
&&&&android:layout_height="fill_parent"
&&&&android:orientation="vertical"&&
&&&&&android.support.v4.view.ViewPager
&&&&&&&&android:id="@+id/pager"
&&&&&&&&android:layout_width="fill_parent"
&&&&&&&&android:layout_height="0dp"
&&&&&&&&android:layout_weight="1.0"&/&
&&&&&ImageView
&&&&&&&&android:id="@+id/ivCursor"
&&&&&&&&android:layout_width="60dp"
&&&&&&&&android:layout_height="5dp"
&&&&&&&&android:scaleType="fitCenter"
&&&&&&&&android:src="@drawable/cursor"&/&
&&&&&LinearLayout
&&&&&&&&android:id="@+id/tabs"
&&&&&&&&android:layout_width="fill_parent"
&&&&&&&&android:layout_height="wrap_content"&/&
&/LinearLayout&
这段代码中，就用了weight来保证ViewPager始终占满屏幕的剩余空间。如果ViewPager里面的内容不需要那么高，怎么办？这个方法就不行了。
还比如：固定ViewPager的高度。height="100dp"。
这样也不是很好。当服务器为了保证图片在不同dpi的手机上，不被缩放，返回的图片高度也有可能不同，固定高度就造成了不能很好的适应这钟变化。
在实际开发中，本人用的最多的就是通过LayoutParmas动态改变ViewPager的高度。
个人感觉这个方法不错还比较简单。
在给ViewPager设置View的时候，通过获取view的高度，动态的设置ViewPager的高度等于view的高度，就OK了。
int&viewPagerIndex&=&main.indexOf(viewPager);
int&childViewHeight&=&getChildViewHeight();&//获取ViewPager的子View的高度。
LinearLayout.LayoutParams&params&=&new&LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,&childViewHeight&);//这里设置params的高度。
main.removeView(viewPager);
main.addView(viewPager,&viewPagerIndex&,&params);//使用这个params
或者，直接继承ViewPager，在onMeasure中返回childView的高度。
这样布局的时候，就会使用childView的高度了。思路和上面一样。代码如下：
import&android.content.C
import&android.support.v4.view.ViewP
import&android.util.AttributeS
import&android.view.V
public&class&WrapContentHeightViewPager&extends&ViewPager&{
public&WrapContentHeightViewPager(Context&context)&{
super(context);
public&WrapContentHeightViewPager(Context&context,&AttributeSet&attrs)&{
super(context,&attrs);
protected&void&onMeasure(int&widthMeasureSpec,&int&heightMeasureSpec)&{
int&height&=&0;
//下面遍历所有child的高度
for&(int&i&=&0;&i&&&getChildCount();&i++)&{
View&child&=&getChildAt(i);
child.measure(widthMeasureSpec,
MeasureSpec.makeMeasureSpec(0,&MeasureSpec.UNSPECIFIED));
int&h&=&child.getMeasuredHeight();
if&(h&&&height)&//采用最大的view的高度。
height&=&h;
heightMeasureSpec&=&MeasureSpec.makeMeasureSpec(height,
MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec,&heightMeasureSpec);
人打赏支持
码字总数 51596
比如广告条的高度。
int viewPagerIndex = main.indexOf(viewPager);
main:就是ViewPager的父布局。
viewPager就是viewPager的view实例。
之前写的博客，Demo没有了。。
可以 1.获取item的高度，重新设置viewPager的高度。或者 2.将Item布局居中。
嗯。按比例缩放。
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥jQuery Mobile 介...
老师我要做个网页自适应手机浏览器的高度，宽度没有问题，高度盖怎么设置呢
html,body{height:100%;overflow:}高度设置100%一般都可以的
jQuery Mobile 介...
服务热线:400-678-8266移动前端工作的那些事---前端制作之自适应制作篇
随着移动前端的手机屏幕分辨率越来越多，自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况，而制作人员则需要考虑如何自适应布局等等。
我先从设计的角度来阐述这个问题，首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定，如果制作人员采用响应式布局（稍后会介绍此布局）的制作方案的话，则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化（稍后会介绍此布局）来进行布局制作的话，则需要设计人员提供一个最合理的分辨率设计效果图来适应主流的所有分辨率屏幕的手机。
一、响应式布局
相应式布局的核心内容其实就是使用CSS3引入的Media
Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
　　&link rel=”stylesheet”
type=”text/css”media=”screen and (max-device-width: 400px)”
href=”tinyScreen.css” /&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:
400px），就加载tinyScreen.css文件。
　&link rel=”stylesheet”
type=”text/css”media=”screen and (min-width: 400px) and
(max-device
-width: 600px)”href=”smallScreen.css” /&
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
　@import url(“tinyScreen.css”) screen and (max-device-width:
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
#sidebar {
&& display:
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
以上所述就是响应式布局，主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适应的制作。这种方法比较布局灵活，一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是，设计成本和制作成本都较高，需要做不同的设计模版和页面模版，花费的时间较长。
&& 二、高宽最大化
所谓的高宽最大化是我自定义的名称，其意思是说，只设计一个模版，这个模版无论是从宽度上还是高度上，都做成最大比例的设计图，例如：IOS的iphone系列它们的显示比例宽高之比为：2:3。iphone5显示比例约小些。而安卓系列品牌较杂，不同品牌不同的分辨率，即使同一品牌不同型号也有不同分辨率的。这个很纠结。
但大体上可以分为。2:3、3:4、3:5这三种比值。所以，为了兼容所有的浏览器，在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例，也就是说以高度最高的为基本蓝图。为什么要这么做？以下来解释：
&& 这里需要用到CSS3的几个重要属性即：
-webkit-background-size:100% 100%;
此属性为背景尺寸自动100%进行平铺和拉伸，我们可以使用这个尺寸来进行设置。第一个100%为X轴，第二个100%为Y轴。我们可以把Y轴的比例设置成auto。同时配合background-position属性来使用就可以达到自适应目的。如果我们想取图的上半部分则可以设置background-position：即可。这样当设计图做成3:5的分辨率时就会可以适应所有手机浏览器，3:5的手机自然是全屏。而2:3或是3:4的手机浏览器有了以上两种CSS样式控制就可以做到宽度全屏。而高度则根据background-position：取图的上半部分从而也是全屏（只是高度从上往下取到4，而未到5）。举个实际像素大家就明白了。比如一张效果图是320*516像素的。3:5高度的就是320*516，而2:3比例的则取图的320*480部分。下面的高度36像素就不取了。用这种方法达到全屏自动适应的目的。而内容部分高度和宽度都使用100%或是auto来进行设置即可。字体样式则采用em而非px。就可以了。
此方法有些笨拙，但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。手机页面尺寸设置（二）
来源：博客园
通用Meta定义
1.
（1）强制让文档与设备的宽度保持1：1；
（2）文档最大的宽度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；
（3）user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小。
下图分别是没有定义viewport和定义viewport在手机上显示的hello world网页。

注意：实际测试中发现，HTC G7自身系统浏览器不支持这一条规则，能够对页面进行放大，一旦放大响应的box也随之放大，导致俄页面出现错乱问题，解决方法：定义页面的最小宽度 min-width，body{min-width: 300}
2.
使设备浏览网页时对数字不启用电话功能（不同设备解释不同，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码。
若需要启用电话功能将telephone=yes即可，具体调用格式可以这样书写代码，若在页面上面有google maps, iTunes和youtube的链接会在ios设备上打开相应的程序组件。
HTML5标签的使用
HTML5中增加了很多标签，例如：header、nav、footer等，可以实现更丰富的WEB应用程序体验，并且可以减少开发者的工作量。
目前，手机操作系统和浏览器对HTML5的支持还不是非常完善，在使用的时候需要仔细测试。
在手机版合同信息录入系统中，用到了,该标签与text输入域差不多，但是在给该输入域输入内容时，手机键盘为电话号码键盘，如下图所示。

 
利用CSS3边框背景属性
CSS3中增加了许多新的特性，例如：圆角边框、文字投影等等。目前各个主流浏览器对CSS3属性的实现方式不太一样，这就需要用到各种浏览器的前缀。比较常用的有：
-webkit-border-image
适用于webkit内核的浏览器
google
-moz-border-image
适用于mozilla浏览器 firefox
如下图所示，是iphone上比较常用的web app样式。该网页完全使用CSS3实现，并未使用任何图片。

 
HTML
 





主菜单

 
CSS
 
html, body {
padding: 0
margin: 0
width: 100%
height: 100%;
body {
background: #cbd2d8;
background-image:
-webkit-gradient(linear, left top, right top,
from(#c5ccd4),
color-stop(0.75, #c5ccd4),
color-stop(0.75, transparent),
to(transparent));
-webkit-background-size: 5px 100%;
background-size: 5px 100%;
font: normal 16px/22px Helvetica, Arial, Sans-
-webkit-text-size-adjust: 100%;
header { display: }
header, .button {
-webkit-touch-callout:
-webkit-user-select:
header {
position:
width: 100%;
display: -webkit-
-webkit-box-orient:
-webkit-box-pack:
-webkit-box-sizing: border-
height: 45
padding: 6px 10
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#b2bbca),
color-stop(0.25, #a7b0c3),
color-stop(0.5, #909cb3),
color-stop(0.5, #8593ac),
color-stop(0.75, #7c8ba5),
to(#73839f));
border-top: 1px solid #cdd5
border-bottom: 1px solid #2d3642;
header & h1 {
-webkit-box-flex: 1;
text-align:
margin: 0
font: bold 20px/32px
Helvetica, Sans-
letter-spacing: -1
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
color: #
.button.bordered {
-webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5;
border: solid 1px #54617d;
border-color: #484e59 #54617d #4c5c7a #54617d;
display: inline-
cursor:
padding: 0px 10
font-size: 12
line-height: 28
height: 30
margin-top: 1
-webkit-box-sizing: border-
-webkit-border-radius: 5
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#92a1bf),
color-stop(0.25, #798aad),
color-stop(0.5, #6276a0),
color-stop(0.5, #556a97),
color-stop(0.75, #566c98),
to(#546993));
color: #
-webkit-tap-highlight-color:
-webkit-user-select:
.button.bordered:hover, .button.bordered.hover {
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#7d88a5),
color-stop(0.25, #58698c),
color-stop(0.5, #3a4e78),
color-stop(0.5, #253c6a),
color-stop(0.75, #273f6d),
to(#273f6d));
-webkit-tap-highlight-color:
.button.bordered.back {
padding: 0px 10px 0px 3
margin-left: 10
position:
.button.bordered.back & span {
position:
z-index: 1;
.button.bordered.back & span.pointer {
z-index: 0;
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#92a1bf),
color-stop(0.3, #798aad),
color-stop(0.51, #6276a0),
color-stop(0.51, #556a97),
color-stop(0.75, #566c98),
to(#546993));
border-left: solid 1px #484e59;
border-bottom: solid 1px #9aa5
-webkit-border-top-left-radius: 5
-webkit-border-bottom-right-radius: 5
-webkit-border-bottom-left-radius: 4
height: 23.5
width: 23.5
display: inline-
-webkit-transform: rotate(45deg);
-webkit-mask-image:
-webkit-gradient(linear, left bottom, right top,
from(#000000),
color-stop(0.5,#000000),
color-stop(0.5, transparent),
to(transparent));
position:
left: -9
top: 2.5
-webkit-background-clip:
.button.bordered.back:hover & span.pointer, .button.back.hover & span.pointer {
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#7d88a5),
color-stop(0.3, #58698c),
color-stop(0.51, #3a4e78),
color-stop(0.51, #253c6a),
color-stop(0.75, #273f6d),
to(#273f6d));
header & .button {
position:
right: 10
header & .button.back {
right:
left: 10

块级化a标签
请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
在触控手机上，为提升用户体验，应尽可能保证用户的可点击区域较大。因此，尽量将每条数据都放在一个a标签中。如下图所示，每个酒店的信息都放在一个a标签中，便于用户点击。

 
自适应布局模式
在编写CSS时，尽量不要把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，应使用自适应布局模式，这样做可以让你的页面在 ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，无需再次考虑设备的分辨率。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动