首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android和IOS移动设备:计算浏览器屏幕高度,不包括地址栏和导航栏高度

Android和iOS移动设备上计算浏览器屏幕高度(不包括地址栏和导航栏高度)的方法如下:

  1. Android设备: Android设备可以使用以下代码来计算浏览器屏幕高度(不包括地址栏和导航栏高度):
代码语言:txt
复制
int screenHeight = getResources().getDisplayMetrics().heightPixels;
Rect rectangle = new Rect();
Window window = getWindow();
window.getDecorView().getWindowVisibleDisplayFrame(rectangle);
int statusBarHeight = rectangle.top;
int navigationBarHeight = 0;
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
if (resourceId > 0) {
    navigationBarHeight = getResources().getDimensionPixelSize(resourceId);
}
int browserHeight = screenHeight - statusBarHeight - navigationBarHeight;

在上述代码中,screenHeight获取了整个屏幕的高度,statusBarHeight获取了状态栏的高度,navigationBarHeight获取了导航栏的高度(如果设备有虚拟导航栏的话)。最后,browserHeight即为浏览器屏幕的高度(不包括地址栏和导航栏高度)。

  1. iOS设备: iOS设备可以使用以下代码来计算浏览器屏幕高度(不包括地址栏和导航栏高度):
代码语言:txt
复制
CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
CGFloat statusBarHeight = [UIApplication sharedApplication].statusBarFrame.size.height;
CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;
CGFloat browserHeight = screenHeight - statusBarHeight - navigationBarHeight;

在上述代码中,screenHeight获取了整个屏幕的高度,statusBarHeight获取了状态栏的高度,navigationBarHeight获取了导航栏的高度。最后,browserHeight即为浏览器屏幕的高度(不包括地址栏和导航栏高度)。

总结起来,无论是Android还是iOS设备,都可以通过获取整个屏幕的高度、状态栏的高度以及导航栏的高度来计算浏览器屏幕的高度(不包括地址栏和导航栏高度)。这样可以在移动设备开发中进行屏幕适配和布局设计。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android实战经验分享之如何获取状态栏和导航栏的高度

在 Android 应用开发中,有时我们需要知道状态栏和导航栏的高度,以便在布局中进行调整。获取这些高度的方法有几种,每种方法在准确性和兼容性方面有所不同。...获取状态栏高度的方法 方法一:通过资源名称获取 这种方法最常见,也最推荐,具有较高的准确性和兼容性。...4.4W) 以上,但在较新版本的 Android(API 21及以上)中更为准确。...: 0 } 获取导航栏高度的方法 方法一:通过资源名称获取 这种方法和获取状态栏高度的方式类似。...: 0 } 对比和总结 1、 通过资源名称获取: 优点:简单、代码兼容性好。 缺点:可能受某些定制 ROM 的影响,准确性在极少数情况下可能有问题。

46710

关于移动端适配,你必须要知道的

3.2 移动端开发 在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。...window.outerHeight:获取浏览器窗口外部的高度。表示整个浏览器窗口的高度,包括侧边栏、窗口镶边和调正窗口大小的边框。...window.screen.Height:获取获屏幕取理想视口高度,这个数值是固定的, 设备的分辨率/设备像素比 window.screen.availHeight:浏览器窗口可用的高度。...document.documentElement.clientHeight:获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

1.9K41
  • 关于移动端适配,你必须要知道的

    3.2 移动端开发 在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。...window.outerHeight:获取浏览器窗口外部的高度。表示整个浏览器窗口的高度,包括侧边栏、窗口镶边和调正窗口大小的边框。...window.screen.Height:获取获屏幕取理想视口高度,这个数值是固定的, 设备的分辨率/设备像素比 window.screen.availHeight:浏览器窗口可用的高度。...document.documentElement.clientHeight:获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

    2.1K10

    关于移动端适配,你必须要知道的

    3.2 移动端开发 在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。...window.outerHeight:获取浏览器窗口外部的高度。表示整个浏览器窗口的高度,包括侧边栏、窗口镶边和调正窗口大小的边框。...window.screen.Height:获取获屏幕取理想视口高度,这个数值是固定的, 设备的分辨率/设备像素比 window.screen.availHeight:浏览器窗口可用的高度。...document.documentElement.clientHeight:获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

    2K20

    移动端避免使用100vh

    核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕的底部将被切除。 如下所示: ?...当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...更糟糕的是,当用户首次访问移动设备上的网站时,地址栏将在顶部可见,因此默认的体验是破碎的体验。...例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。

    1.9K20

    移动端避免使用100vh

    核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕的底部将被切除。...如下所示: 当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...更糟糕的是,当用户首次访问移动设备上的网站时,地址栏将在顶部可见,因此默认的体验是破碎的体验。...例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。

    2K20

    font-size用VW来写的方法

    有时候为了字体的计算,我们会将文章采用10px字体。...视窗(​Viewport​)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。...3,vmin、vmax 用处 做移动页面开发时,如果使用 ​vw​、​wh ​设置字体大小(比如 ​5vw​),在竖屏和横屏状态下显示的字体大小是不一样的。...Opera​:自​ 15 ​版起就完美支持(2013年7月) ​IE​:自 ​IE10​ 起(包括 ​Edge​)到现在还只是部分支持(不支持 ​vmax​,同时 ​vm ​代替 ​vmin​) (2)移动设备...​Android​:自 ​4.4​ 版起就完美支持(2013年12月) ​iOS​:自 ​iOS8 ​版起就完美支持(2014年9月)

    3610

    【总结】移动应用界面设计的尺寸设置及规范

    本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。...尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。 ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。...在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。...但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求: 状态栏高度:50 px 导航栏、操作栏高度:96 px=48dp x 2 主菜单栏高度:96 px 内容区域高度:1038...px (1280-50-96-96=1038) Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px 4、图标和字体大小(来自官方规范文档) a、启动图标

    3.6K40

    移动Web 开发中的一些前端知识收集汇总

    safari私有meta标签,它表示:允许全屏模式浏览,在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar; 第二个meta标签表示:强制让文档的宽度与设备的宽度保持...--不让android识别邮箱--> 自定义主屏上的图标 用户添加到主屏后,如果网站没有图标,则默认主屏上的图标为当前网页的截图,你可以通过下面的代码指定在普通和retina屏幕上的icon: <link...添加初始化图片 用户点击你桌面上的webapp的图标后,打开会加载浏览器(实际上是webkit webview模块),然后下载、解析、渲染,在这个过程中,ios允许我们使用一个初始化图片来替代白色的浏览器屏幕...Web App》、《iOS / Android 移动设备中的 Touch Icons》这两篇文章了解更多。...其他js杂项 window.scrollTo(0,0); /*隐藏地址栏*/ window.matchMedia(); /*匹配媒体*/ navigator.connection; /*决定手机是否运行在

    3.9K50

    PC端、移动端的页面适配及兼容处理

    (一)几个概念 1.css像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 css像素时抽象和相对的了,在不同设备中1px对应不同的设备像素;iphone3分辨率是...5.layout viewport 移动设备的默认viewport,css布局是以layout viewport 来做为参考系计算的 document.documenElement.clientWidth...设备屏幕的尺寸 单位是物理像素 screen.width 获取 屏幕尺寸是不变的 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容 设置移动端网站一般以这个viewport为准...viewport的width,android 自带浏览器支持设置 target-densitydpi来达到目的; target-densitydpi = UI-width/device-widthwindow.devicePixelRation160...miniual-ui ios的safari为meta表天新增的属性,在网页加载是隐藏顶部的地址栏和底部的导航栏 (三)相关代码讲解 移动页面设计 480*854的比例 dpi = 480/screen.widthwindow.devicePixelRatio160

    2.8K20

    避免在移动端页面中使用100vh

    核心问题是移动浏览器(说的就是你,Chrome和Safari)具有“有用”功能:地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...当视口高度变化时,这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度,而是将100vh设置为隐藏了地址栏的浏览器的高度(其实就是100vh高度没变,但是地址栏那块把内容顶出去了一块)。...例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见,屏幕都将是视口的高度。...此外,在页面首次加载时将高度固定为适当的大小,可以防止在使用该网站的过程中地址栏隐藏,从而带来尴尬的屏幕调整大小体验。...遗憾的是,在不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大(greatness),但考虑到它在移动设备上的局限性,最好避免使用它。

    1.6K30

    UniApp开发的设备适配

    UniApp 是一个跨平台开发框架,支持多端应用(如H5、小程序、iOS、Android等)。由于不同设备的屏幕尺寸、分辨率、操作系统等存在差异,设备适配是开发过程中需要重点关注的问题。...SVG 图标:使用 SVG 图标,确保在高分辨率屏幕上清晰显示。4.导航栏与状态栏适配4.1导航栏适配自定义导航栏:使用 uni.setNavigationBarTitle 动态设置导航栏标题。...4.2状态栏适配获取状态栏高度:使用 uni.getSystemInfo 获取状态栏高度,动态调整布局。...使用模拟器测试不同分辨率和屏幕尺寸。6.2调试工具使用 Chrome DevTools 调试 H5 页面。使用微信开发者工具调试小程序。使用 HBuilderX 的真机调试功能调试移动端应用。...7.总结UniApp 的设备适配需要从屏幕、平台、字体、导航栏、横竖屏等多个方面入手。通过合理的适配策略和工具支持,可以确保应用在不同设备上提供一致的用户体验。

    7600

    移动应用界面设计的尺寸规范「建议收藏」

    本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。...尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。...在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。...但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求: 状态栏高度:50 px 导航栏、操作栏高度:96px=48dp x 2 主菜单栏高度:96 px 内容区域高度...:1038 px(1280-50-96-96=1038) Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px 4、图标和字体大小(来自官方规范文档)

    5.3K20

    在移动端避免使用100vh「建议收藏」

    核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为隐藏地址栏的浏览器高度。结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。...如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应该在屏幕底部的按钮被隐藏了。...如果地址栏是隐藏的,那么window.innerHeight将是屏幕可见部分的高度,正如您所期望的那样。...遗憾的是,仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。height: 100vh是如此接近伟大,但考虑到它在移动设备上的局限性,最好避免它。

    2.7K21

    界面劫持之触屏劫持

    01 触屏劫持发展过程移动智能终端设备由于体积限制,一般都没有鼠标、键盘这些输入设备,用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。...在移动设备上,类似点击劫持的攻击模式,实现了对用户触摸屏操作的劫持攻击,即界面操作劫持攻击的又一种形式——触屏劫持。2010年斯坦福公布触屏劫持攻击。...由于手机屏幕范围有限,手机浏览器为了节省空间会把地址栏隐藏起来,因此在手机上的视觉欺骗更容易实施。...据悉超过78%的Android设备受此漏洞影响。02触屏劫持技术原理1.桌面浏览器iOS中的safari浏览器可以将一个网页添加到桌面,当做一个独立的应用运行。...苹果手机在使用Safari浏览器的时候,遇到不明情况的提示框或页面,一定要确认地址栏的地址是否隐藏以及是否正确,若网站上含有触屏劫持,则大概率会添加假的地址栏做误导,需谨慎认清。

    33220

    Android vs iOS:未曾停息的强强对决

    iOS和Android的顶部都有运行状态栏,它提供如时间、wifi连接、手机信号和电池使用状况等信息。在Android'状态栏还会显示新收的电子邮件、消息和提醒的数量。...当年苹果推出iOS 6时,把自己的地图应用捆在每一个iOS设备还上招致了不少批评呢。 网页浏览 Android使用谷歌Chrome作为其网络浏览器,而iOS 使用的是Safari浏览器。...l 操作栏:iOS导航栏通常只是一个返回按钮链接到前一个画面。 而在Android中,导航栏通常有几个操作按钮。 l 实例: Android应用程序可以灵活地进行交互操作。...Android的优劣: - 大规模的硬件选择 :有大量的Android设备可选,不同价位,不同硬件功能,不同屏幕尺寸和特性。...- 可高度可定制,改善用户体验 :主屏幕不仅可以定制的应用程序图标,还可以定制小部件,允许用户保持联系或通知。 其他的例子包括SwiftKey,修改你的Android智能手机的键盘,云云。

    1.8K80

    前端兼容性

    比如: iOS app的UI资源区分@1x、@2x和@3x,这就是指原始分辨率对逻辑分辨率的倍数,被称为设备像素比DPR。...桌面屏幕分辨率说明   移动设备一开始就考虑了DPR,而Windwos桌面的分辨率由于历史原因却没有这一概念, 于是Windwos引入了DPI,最初是设置DPI,后来是设置DPI比例。...媒体查询   媒体查询可用于检测很多事情 例如: viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏,竖屏) 。...对于流量较小的网站,平台的兼容策略主要是应用响应式框架(比如:normalize.css、Bootstrap 等),加上移动端主菜单与导航栏即可,其次可以选用跨平台框架来实现在不同平台的差异化体验。...和Android用户选中文字 解决方案:-webkit-user-select:none

    1.9K20
    领券