首页
学习
活动
专区
工具
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 的影响,准确性在极少数情况下可能有问题。

18710

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

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

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

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

    1.9K41

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

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

    2K20

    移动端避免使用100vh

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

    2K20

    移动端避免使用100vh

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

    1.8K20

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

    本篇将结合iOSandroid官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。...尽管概念不同,但是对于移动设备的显示屏,可以看作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.5K40

    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.7K20

    移动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

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

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

    1.6K30

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

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

    4.8K20

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

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

    2.6K21

    移动端web页面开发的一些问题

    前端涉及到的领域不单单只是PC浏览器了,现在是移动为王的时代,所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。...1、移动端隐藏手机浏览器地址栏以及底部的菜单 在设置移动端页面的宽高为100%的时候,里面的元素设置flex:1的时候,因为浏览器地址栏以及下面的工具的问题会导致在有的手机上面的页面显示不全的问题...因为我们不好计算每一个浏览器地址栏以及工具高度,所以我们直接把它隐藏起来即可,下面的隐藏的代码。 <!...而跟标签(html标签)的自己大小根据手机的屏幕大小来设置。

    1.3K20

    界面劫持之触屏劫持

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

    29920

    前端兼容性

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

    1.9K20

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

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

    1.7K80

    单屏页面响应式适配玩法

    把公共的 页头 、页脚、导航、边框 放到最顶层,比方说设置层级为 999,其他每个独立页则放在下面,然后切换页面的时候更新独立页的层级以达到效果图的效果(当然不能超过最顶层)。...100: Chrome 标签页高度 + 地址栏高度 + 书签高度 2、Windows + Chrome 然后我们再看看 Windows + Chrome 的情况,以 1366 x 768 为例..., Chrome 的网页可视区高度大概为 768 - 150 = 618px 150 = 40 + 110 40: Windows 桌面底部程序坞尺寸 110: Chrome 标签页高度 + 地址栏高度...+ 书签高度 3、总结上面两点 以上两点的高度计算通过截图获得,可能会有些许误差。...9、移动移动端用户是没法操作浏览器的,所以基本上都是标准的长宽比,用 vh 最合适不过了,或 vw。

    2K20
    领券