移动端高度怎么自适应

移动端高度怎么自适应,第1张

移动web宽度自适应,高度怎么算

css3用box-flex;

在w3school里找找,主要是根据父元素按比例分配高度

父元素{width:100%;display:box;}

比如三栏布局A、B、C要想设成一样的宽度就用

A{box-flex:1;}B{box-flex:1;}C{box-flex:1;}

要是两栏布局B是A的2倍那就是

A{box-flex:1;}B{box-flex:2;}高度也是还有一个css3的新功能就是calc()计算,可以计算高度,可以试着用一下

PS,我只是说说,移动端响应式局的话,布局要随着窗口变的,

就像你这个,要是在普通的手机端就得变成一栏布局,不能保持三栏

用Media Query设置不同的窗口宽度给不同的css样式

都是css代码不用js控制

html5移动端div的高度怎么设置自适应

在文档流中,DIV的高度默认就是根据内容的高度自适应的。

如果是想适配不同设备的窗口大小,可以设置百分比。或者通过position定位,然后设置top和bottom值。再或者利用css3的flexbox布局,设置父级的display为flex,方向为纵的,然后设置其flex:1;

HTML5里面怎样自动适应手机屏幕的高度

试试在网页的头部中间加上这段代码 可以让网页的宽度自动适应手机屏幕的宽度

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=10:表示初始的缩放比例

minimum-scale=05:表示最小的缩放比例

maximum-scale=20:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例

其实我也是上网搜了看到这个比较有效才提供给你!!

前端怎么设置手机端页面高度自适应

那高度你就不要去赋值了,不用写高度不就是高度自适应内容吗,

如果你想的是高度和屏幕高度一样,那就设置成100%;

HTML5里面怎样自动适应手机屏幕的高度

1通过设置viewport参数

2使用css3中的缩放

两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题。

在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

html5移动端div的高度怎么设置自适应

你好,自适应的话,这样写: min-height:50px; overflow:hidden;

移动端网页开发自适应高度rem一定要自己计算么

web页面的自适应开发,要求就是跨平台,跨浏览器,一般mobile+pc,前几天写了几个pc端全屏页面,用的是百分比,在手机上看了下效果 相去甚远。这么看来mobile+pc 的自适应 有些时候就是个伪命题。

那对于移动端的自适应就 一般的宣传页面全屏滑动那种,用百分比,若复杂了就肯定不行,仔细看了下某淘的处理用的rem为单位,就学习在这个方法吧首先对于设计图,width 一般是640的。

rem:CSS3新增了一个相对单位rem(root em,根em),这样rem 就应该设定在html{font-size:1rem;},

某淘对此的设定是根据手机宽度设定的,

必不可少的这句: 由js 控制的 ,

首先是在苹果上不一样,苹果6就是

这样设置可以用 windowdevicePixelRatio 设备像素比

windowclientWitdhwindowdevicePixelRatio/10 ,这样就得出了font-size大小,

而andorid上有大部分就是、

font-size就是 windowclientWitdh/10;

淘里使用的代码:

!function(J, I) {

function H() {

var d = EgetBoundingClientRect()width;

d / B > 540 && (d = 540 B);

var e = d / 10;

EstylefontSize = e + "px",

zrem = Jrem = e;

}

var G, F = Jdocument,

E = FdocumentElement,

D = FquerySelector('meta[name="viewport"]'),

C = FquerySelector('meta[name="flexible"]'),

B = 0,

A = 0,

z = Iflexible || (Iflexible = {});

if (D) {

consolewarn("将根据已有的meta标签来设置缩放比例");

var y = DgetAttribute("content")match(>>

css3 手机端怎么高度自适应

一般是宽度为响应式的,在手机端,要使用rem作为单位,这样可以使手机分辨率在发生变化时,高度和宽度同时发生改变。

现在开始流行使用rem作为手机端的单位,淘宝,京东都是用rem。

前端怎么设置手机端页面高度自适应

那高度你就不要去赋值了,不用写高度不就是高度自适应内容吗,

如果你想的是高度和屏幕高度一样,那就设置成100%;

如何开发一个app,使他自适应各种分辩率

流媒体技术基础-流媒体传输协议

作者/来源:未知

实时传输协议RTP与RTCP

RTP(Real-timeTransportProtocol)是用于Internet上针对多媒体数据流的一种传输协议。RTP被定义为在一对一或一对多的传输情况下工作,其目的是提供时间信息和实现流同步。RTP通常使用UDP来传送数据,但RTP也可以在TCP或ATM等其他协议之上工作。当应用程序开始一个RTP会话时将使用两个端口:一个给RTP,一个给RTCP。RTP本身并不能为按顺序传送数据包提供可靠的传送机制,也不提供流量控制或拥塞控制,它依靠RTCP提供这些服务。通常RTP算法并不作为一个独立的网络层来实现,而是作为应用程序代码的一部分。实时传输控制协议RTCP。RTCP(Real-timeTransportControlProtocol)和RTP一起提供流量控制和拥塞控制服务。在RTP会话期间,各参与者周期性地传送RTCP包。RTCP包中含有已发送的数据包的数量、丢失的数据包的数量等统计资料,因此,服务器可以利用这些信息动态地改变传输速率,甚至改变有效载荷类型。RTP和RTCP配合使用,它们能以有效的反馈和最小的开销使传输效率最佳化,因而特别适合传送网上的实时数据。

621 RTP数据传输协议

RTP提供端对端网络传输功能,适合通过组播和点播传送实时数据,如视频、音频和仿真数据。RTP没有涉及资源预订和质量保证等实时服务,RTCP扩充数据传输以允许监控数据传送,提供最小的控制和识别功能。RTP与RTCP设计成独立传输和网络层。

211 RTP固定头

RTP 头格式如下:

-----------------------------------------------------------------------------------------------

|V=2|P|X| CC |M| PT | 系列号 |

-----------------------------------------------------------------------------------------------

| 时标 |

-----------------------------------------------------------------------------------------------

| 同步源标识(SSRC) |

-----------------------------------------------------------------------------------------------

| 作用标识 (CSRC) |

| |

-----------------------------------------------------------------------------------------------

开始12个八进制出现在每个RTP包中,而CSRC标识列表仅出现在混合器插入时。

212 复用 RTP 连接

为使协议有效运行,复用点数目应减至最小。RTP中,复用由定义RTP连接的目的传输地址(网络地址与端口号)提供。例如,对音频和视频单独编码的远程会议,每个媒介被携带在单独RTP连接中,具有各自的目的传输地址。目标不在将音频和视频放在单一RTP连接中,而根据SSRC段载荷类型进行多路分解。使用同一SSRC ,>>

先说正确的获取屏幕高度方式

使用以下的方法去获取获取应用的屏幕高度

此处通过 getMetrics() 获取的高度其实是去除了虚拟按键后的高度。所以和手机的实际屏幕高度可能有差异

getReaMetrics() 则是真正原始的屏幕尺寸

$(window)是jquery 对象, 加height()  也是就是获取窗口高度

同理,如果你想获取某个div的高度可以使用

var divHeight = $("div")height();

/或者/

var divHeight = $("div")[0]offsetHeight;

$("div")是jquery对象,$("div")[0] 或者 $("div")get(0)是dom对象

但是在开发中会有很多坑  这点你得注意

如果 当前的 元素是 隐藏状态 display : none

那你是无法通过上述方法和获取宽高的  ,所以在开发中如果没有获取到宽高,就要留意上面的代码在执行的时候 该元素是不是在隐藏状态

如果你想把 屏幕的高度 赋值给div

$("div")height(winHeight)

// 或者

$("div")[0]offsetHeight = winHeight

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

1介绍:介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2屏幕信息:介绍屏幕尺寸信息;如:屏幕、软件可用以及任务栏的高度和宽度。

3浏览器信息:介绍浏览器尺寸信息;如:浏览器、内部页面以及工具栏的高度和宽度。

4页面信息:介绍HTML页面尺寸信息;如:body总的、展示的高度和宽度。

一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。

HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

容器的尺寸是指当前分辨率下的高度、宽度,而不是物理高度、宽度。

如:一个22寸的显示器,屏幕分辨率为1366 768,那么获取到的屏幕高度为1366px,宽度为768px。

screenheight : 屏幕高度。

screenwidth : 屏幕宽度。

screenavailHeight : 屏幕可用高度。即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。

screenavailWidth : 屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度,可表示为软件最大化时的宽度。

任务栏高/宽度 : 可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如:任务栏高度 = screenheight - screenavailHeight 。

windowouterHeight : 浏览器高度。

windowouterWidth : 浏览器宽度。

windowinnerHeight : 浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

windowinnerWidth : 浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 : 包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:windowouterHeight - windowinnerHeight。

bodyoffsetHeight : body总高度。

bodyoffsetWidth : body总宽度。

bodyclientHeight : body展示的高度;表示body在浏览器内显示的区域高度。

bodyclientWidth : body展示的宽度;表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 : 如高度,可通过浏览器内页面可用高度 - body展示高度得出,即windowinnerHeight - bodyclientHeight。

jQuery的api文档中有列出来,获取网页的滚动高度用方法:scrollTop() 即可。注意:要获取网页的滚动高度,兼容所有浏览器的写法是获取window对象然后调用scrollTop()函数。简单示例:alert($(window)scrollTop());jQuery的api文档目录翻译见:

问题一:js 中怎么获取当前屏幕的宽度 documentdocumentElementclientWidth 这个方法返回页面在当前窗口中可见部分的宽度(不包括滚动条宽度);

windowinnerWidth 这个方法返回页面在当前窗口中可见部分宽度(包括滚动条宽度);

windowouterWidth 返回浏览器窗口自身宽度,包括菜单和边框;

screenwidth 返回设备的(屏幕宽度)

问题二:js网页如何获取手机屏幕宽度 ]@]@]

@sssss

var x = navigator;

var w=windowinnerWidth

|| documentdocumentElementclientWidth

|| documentbodyclientWidth;

var h=windowinnerHeight

|| documentdocumentElementclientHeight

|| documentbodyclientHeight;

documentgetElementById(p1)innerHTML=屏幕分辨率:+screenwidth + + screenheight+内部窗口: + w + + h

不知道是不是这个 屏幕分辨率 :pc上的桌面分辨率 。手机上是 一个型号固定的分辨率比如

华为8813的分辨率是480854。。 内部窗口是 改变窗口大小刷新一下就有新的数据

问题三:用javascript 怎样才能很好的获取手机的屏幕宽度和高度 一般来说在移动浏览器上是拿不到屏幕真实分辨率的,因为页面渲染是在一个叫viewport的页面绘制区域内(说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的)。viewport和屏幕的真实尺寸并不是对应的,如在Safari Mobile中viewport默认宽度(320px)是屏幕真实尺寸(640px)的一半,这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例,如initial-scale=5就可以让viewport和屏幕一致的尺寸,但这个比例在不同的手机上并不一定是2倍关系,特别是Android手机,在大屏手机(5寸以上)上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸,就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法,就是:css的媒体查询(@media)是能够检测屏幕尺寸(其实是浏览器窗体的真实尺寸,并不是屏幕的真实物理尺寸,介意的朋友就不要看了)的,通过它来给网页内的某个元素设置一个特殊的属性,然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值(比如480px到540px之间、540px到600px之间等等),不是精确值,所以可能得不偿失,因此我是不推荐的。

问题四:如何获得当前屏幕的高度 windowonload = function(){ 获取屏幕高度 documentdocumentElementclientHeightconsolelog(documentdocumentElementclientHeight); 获取屏幕宽度 documentdocumentElementclientWidthconsolelog(documentdocumentElementclientWidth);}

问题五:html中 如何获取屏幕宽度 把以下这段代码放到之间或之间预览即可看到数据

/将获取的值存到变量里/

width_screen=screenwidth;

height_screen=screenheight;

availWidth_screen=screenavailWidth;

availHeight_screen=screenavailHeight;

colorDepth_screen=screencolorDepth;

/end/

/输出值/

documentwrite(你的屏幕宽为:+width_screen+

你的屏幕高为:+height_screen+

你的屏幕可用宽为:+availWidth_screen+

你的屏幕可用高为:+availHeight_screen+

你的颜色设置所有为数为:+colorDepth_screen);

/end/

问题六:怎么用jquery来获取屏幕的宽度和高速 $(window)width();$(window)height();严格来说,获取window才对

问题七:javascript怎么获取屏幕大小 1

2

3

4

5

6

7

8

9

windowonload = function(){

获取屏幕高度 documentdocumentElementclientHeight

consolelog(documentdocumentElementclientHeight);

获取屏幕宽度 documentdocumentElementclientWidth

consolelog(documentdocumentElementclientWidth);

}

问题八:PHP怎么获取屏幕的宽度与高度? 10分 PHP是无法获取屏幕的高度和宽度的,你可以用JS来获取

Javascript:

网页可见区域宽: documentbodyclientWidth网页可见区域高: documentbodyclientHeight网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)网页可见区域高: documentbodyoffsetHeight (包括边线的高)网页正文全文宽: documentbodyscrollWidth网页正文全文高: documentbodyscrollHeight网页被卷去的高: documentbodyscrollTop网页被卷去的左: documentbodyscrollLeft网页正文部分上: windowscreenTop网页正文部分左: windowscreenLeft屏幕分辨率的高: windowscreenheight屏幕分辨率的宽: windowscreenwidth屏幕可用工作区高度: windowscreenavailHeight屏幕可用工作区宽度: windowscreenavailWidth

JQuery:

$(document)ready(function(){alert($(window)height()); 浏览器当前窗口可视区域高度alert($(document)height()); 浏览器当前窗口文档的高度alert($(documentbody)height());浏览器当前窗口文档body的高度alert($(documentbody)outerHeight(true));浏览器当前窗口文档body的总高度 包括border padding marginalert($(window)width()); 浏览器当前窗口可视区域宽度alert($(document)width());浏览器当前窗口文档对象宽度alert($(documentbody)width());浏览器当前窗口文档body的宽度alert($(documentbody)outerWidth(true));浏览器当前窗口文档body的总宽度 包括border padding margin})

问题九:怎样用 JavaScript 准确获取手机屏幕的宽度和高度 屏幕分辨率的高:windowscreenheight

屏幕分辨率的宽:windowscreenwidth

网页可见区域宽:documentbodyoffsetWidth

网页可见区域高:documentbodyoffsetHeight

问题十:Android开发 怎样获取屏幕的宽高是多少厘米 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸

下面的代码即可获取屏幕的尺寸。

在一个Activity的onCreate方法中,写入如下代码:

[java] view plain copy print

DisplayMetrics metric = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(metric);

int width = metricwidthPixels; 屏幕宽度(像素)

int height = metricheightPixels; 屏幕高度(像素)

float density = metricdensity; 屏幕密度(075 / 10 / 15)

int densityDpi = metricdensityDpi; 屏幕密度DPI(120 / 160 / 240)

DisplayMetrics metric = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(metric);

int width = metricwidthPixels; 屏幕宽度(像素)

int height = metricheightPixels; 屏幕高度(像素)

float density = metricdensity; 屏幕密度(075 / 10 / 15)

int densityDpi = metricdensityDpi; 屏幕密度DPI(120 / 160 / 240)

但是,需要注意的是,在一个低密度的小屏手机上,仅靠上面的代码是不能获取正确的尺寸的。比如说,一部240x320像素的低密度手机,如果运行上述代码,获取到的屏幕尺寸是320x427。因此,研究之后发现,若没有设定多分辨率支持的话,Android系统会将240x320的低密度(120)尺寸转换为中等密度(160)对应的尺寸,这样的话就大大影响了程序的编码。所以,需要在工程的AndroidManifestxml文件中,加入supports-screens节点,具体的内容如下:

[html] view plain copy print

>

以上就是关于移动端高度怎么自适应全部的内容,包括:移动端高度怎么自适应、Android 获取手机屏幕高度 getMetrics和getRealMetrics的区别、var winHeight=$(window).height();这句话是获取屏幕高度,请问我怎样应用到具体某个div里呢等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9487929.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存