开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何获得屏幕高度并按比例调整视图

要获得屏幕高度并按比例调整视图，可以使用以下步骤：

在前端开发中，可以使用JavaScript来获取屏幕高度。可以通过window.innerHeight属性获取当前浏览器窗口的高度，或者使用screen.height属性获取整个屏幕的高度。
一般情况下，需要将获取到的屏幕高度与设计稿中的标准高度进行比较，以确定需要进行的缩放比例。设计稿中的标准高度可以是固定的像素值，例如750px。
计算缩放比例。可以通过将屏幕高度除以设计稿中的标准高度，得到一个比例值。例如，屏幕高度为1080px，设计稿标准高度为750px，则缩放比例为1080/750=1.44。
根据计算得到的缩放比例，可以使用CSS的transform属性对视图进行缩放。例如，可以使用transform: scale(1.44)来将视图按比例进行缩放。
在移动开发中，可以使用响应式布局或者媒体查询来适配不同屏幕尺寸。通过设置不同的CSS样式或者使用CSS框架，可以根据屏幕高度自动调整视图的布局和样式。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端部署服务：https://cloud.tencent.com/product/scf
腾讯云移动开发服务：https://cloud.tencent.com/product/mob
腾讯云云原生应用服务：https://cloud.tencent.com/product/tke
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
腾讯云音视频处理服务：https://cloud.tencent.com/product/mps
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/vr

相关搜索:如何获得屏幕宽度和高度如何使比例只改变视图的高度？如何获得比例因子，以获得真实的屏幕分辨率？如何获得视图的宽度和高度？如何获得减去操作栏的屏幕高度？swift:如何调整表视图的高度以适应超级视图的高度如何调整带有屏幕限制的文本视图？如何让视图始终分配相同比例的屏幕？如何调整子视图控制器的高度以匹配容器视图的高度 ObjC -如何显示/隐藏具有比例高度约束的视图？如何根据不同的屏幕尺寸(高度和宽度)调整Subview？如何在用jQuery调整窗口大小后获得背景高度？如何在javascript中获得准确的屏幕高度和宽度？如何在屏幕上获得平面列表的可见性高度？如何在Jetpack Compose视图中获得测量的高度？如何根据屏幕分辨率调整应用的高度和宽度如何在xaml中调整大小后获得新的窗口高度将img的高度链接到img的宽度，在调整屏幕大小时保持正方形比例如何在所有屏幕尺寸上调整视图的大小？如何获得与整个屏幕对应的屏幕坐标,而不是触摸的视图？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter之屏幕适配

因移动设备的多样性，特别是 Android 的碎片化严重，存在各种各样的分辨率，而 Flutter 跨平台开发又需同时支持 Android 和 iOS ，为尽可能的还原设计图效果提升用户体验，屏幕适配就势在必行了。

02

【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )

在 MyApp 中 , 使用 ScreenUtilInit 作为最顶层的组件 , 包裹 MaterialApp 组件 ;

02

详解Android中获取软键盘状态和软键盘高度

在Android应用中有时会需要获取软键盘的状态（即软键盘是显示还是隐藏）和软键盘的高度。这里列举了一些可能的应用场景。

02

Unity3D-关于项目的屏幕适配(看我就够了)

屏幕适配是为了让我们的项目能够跑在各种电子设备上(手机,平板,电脑) 那么了解是适配之前首先要了解两个知识点:

05

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

04

【Flutter 专题】29 易忽略的【小而巧】的技术点汇总 (五)

和尚在做 Android 时经常会双击快速点击返回键弹出退出对话框，之后在进行操作，而 Flutter 也提供了监听返回导航的 WillPopScope，其中的回调方法返回一个 boolean 类型，true 时退出页面，false 时不退出，和尚设置在 1500ms 之内连续点击两次弹出提示框。在对时间进行监听时，和尚用到 Duration 可以设置时分秒毫秒微秒等，方便快捷。

05

nicegui布局细节补充——容器高度与滚动条

前面的章节我们已经学会了 nicegui 中常用的各种布局方式：flex 和 grid 布局。这节我们将详细讲解容器高度以及滚动条的问题。

01

Android屏幕适配AndroidAutoSize的使用「建议收藏」

implementation ‘me.jessyan:autosize:1.2.1’

02

模仿企鹅FM播放主页面滑动动态改变各视图的大小

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果)，老规矩看图先:

02

iOS WKWebView+UITableView混排

WKWebView+UITableView混排做内容展示页的时候，经常会用到WKWebView+UITableView的混排功能，现在此做一个总结，该功能的实现我采用了四种方法。方案1： webView作为tableView的Header, 撑开webView，显示渲染全部内容，当内容过多时，比如大量高清图片时，容易造成内存暴涨（不建议使用），此方案简单粗暴 , 仅适用于内容少的场景，具体实现不在此赘述，直接看代码。方案2：简书的内容页实现方案 : UIWebView与UITableV

03

Android ListView实现下拉顶部图片变大效果

本文实例为大家分享了Android ListView下拉顶部图片变大的具体代码，供大家参考，具体内容如下

02

Android编程实现图片放大缩小功能ZoomControls控件用法实例

本文实例讲述了Android编程实现图片放大缩小功能ZoomControls控件用法。分享给大家供大家参考，具体如下：

05

AndroidAutoSize今日头条适配方案[通俗易懂]

最近公司没有什么事，闲来无聊，就研究一下今日头条的适配方案，不看不知道，真是一看吓一跳，快速上手而且还简单易懂，

01

图片中多个二维码选择的实现

买早餐的时候会遇到，支付宝和微信的二维码贴在一起，然后扫码的时候两个二维码一起被识别出来的情况。之前的处理可能是：APP内部判断是自己的 Scheme 的时，自动跳转；后来发现变成了识别到多个二维码时，弹出二维码选择页，用户选择具体二维码后，再跳转。

02

实用Android 屏幕适配方案分享

真正可用，并且简单易行，可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案，已用在一款成熟互联网应用中，效果还不错。说起android开发，UI界面的多机型适配，一向是个很重要

Web端TRTC混流，一个流屏幕录制，一个流摄像头采集，混流后观众看到两个画面出现错位的解决方案

首先，给出TRTC云端混流的官网以及介绍（https://cloud.tencent.com/document/product/647/16827 ）。

01

移动端避免使用100vh

CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。

02

实用Android 屏幕适配方案分享

实用Android 屏幕适配方案分享真正可用，并且简单易行，可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案，已用在一款成熟互联网应用中，效果还不错。说起android开发

07

GDI+写字辅助呼出菜单

.版本 2 .支持库 spec .子程序 Ashin_ .局部变量 hdc, 整数型 .局部变量图形, GP图形 .局部变量画刷, GP纯色画刷 .局部变量字体, GP字体 .局部变量画笔, GP画笔 .局部变量矩形, 矩形F hdc ＝ GetDC (窗口_取句柄 (, , “Valve001”, “No More Room in Hell”)) 调试输出 (hdc) 图形.创建自DC (hdc) 画刷.创建 (RGB到ARGB (#绿色, )) 矩形＝制矩形F (10, 10,

05

移动端避免使用100vh[通俗易懂]

CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。

02

Unity ugui屏幕适配与世界坐标到ugui屏幕坐标的转换

我们知道，如今的移动端设备分辨率五花八门，而开发过程中往往只取一种分辨率作为设计参考，例如采用1920*1080分辨率作为参考分辨率。

01

小程序长列表优化实践

在一些电商的小程序项目中，长列表是一个很普遍的场景，在加载大量的列表数据的过程中，可能会遇到手机卡顿，白屏等问题。也许数据进行分页处理可以防止一次性加载数据带来的性能影响，但是随着数据量越来越大，还是会让小程序应用越来越卡顿，响应速度越来越慢。这种问题不仅仅在小程序上，在移动端 h5 项目中同样存在。

02

周杰伦读心术背后的技术实现

前言　　在技术细节的内容开始之前，您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <

08

Android监听键盘状态获取键盘高度的实现方法

Android暂时还没有提供一个合适的API来获取/监听键盘的状态和高度 , 而我们又经常会有这个需求.

01

手机软键盘弹起导致页面变形的一种解决方案

最近用 uniapp（一种第三方 app 开发框架）开发 app，其中一个页面有十几个 input 输入框，在点击 input 输入时，软键盘弹起，导致页面往上顶，底部的按钮也全部弹到页面上面去了，布局全被打乱。

04

[前端]GOFLY在线客服-使用vh、vw使div元素充满屏幕-GO语言实现开源独立部署客服系统

当进行布局的时候，有时候需要div元素根据屏幕的宽度和高度进行自适应，而不是根据内容

02

关于H5在移动端弹出下拉选项时遮挡输入框的问题

fixed定位的元素是相对于屏幕视口(viewport)进行定位的，当H5嵌入到app的webview中进行展示时，可以理解为：fixed是相对于webview进行定位的。

03

IOS7 隐藏状态栏 (电池栏)

在uiviewcontroller的子类下，调用： if ([self respondsToSelector:@selector(setNeedsStatusBarAppearanceUpdate)]) { // iOS 7 [self prefersStatusBarHidden]; [self performSelector:@selector(setNeedsStatusBarAppearanceUpdate)]; } - (BOOL)prefersStatusBarHidden { return YES;//隐藏为YES，显示为NO }

02

精确计算微信小程序scrollview高度，全机型适配

众所周知，可以滑动的 scroll 组件在移动端非常的重要，几乎每个页面都要用到。

02

实战|Android超强的屏幕适配框架AutoSize的使用效果

早就想研究一下屏幕适配这块了，主要开始我自己做的那个APP都是基于PDA的，所以不需要适配别的机形，而原本自己的那个PDA的屏幕比例也是比较特别，用他的效果在手机或是Android虚拟机上效果都不好看，差别好大，于是就想研究一下关于Android屏幕适配的框架，原来找到一个AndroidAutoLayout的框架，结果后来发现这个已经N年没再更新了，无意间发现了今日头条屏幕适配方案终极版，用了一下，真是简单又好用。

03

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求：保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致，则以图片中心为基点等比缩放背景图片，以适应屏幕尺寸。以上需求的原则就是始终保持背景图片宽高比，居中等比缩放填满屏幕。我们知道background-size: cover;是在背景图片保持原始比例的基础上，等比缩放覆盖背景区域。但是缩放的基点是左上角(0,0)，并不是居中缩放的。这样的机制下，屏幕显示的始终是背景图片的左上部分，并不能满足项目的需求。后来无意中注意到必应首页的背景图片是居中平铺的，行为表现与

05

5种方法完美解决android软键盘挡住输入框方法详解

在开发中，经常会遇到键盘挡住输入框的情况，比如登录界面或注册界面，弹出的软键盘把登录或注册按钮挡住了，用户必须把软键盘收起，才能点击相应按钮，这样的用户体验非常不好。像微信则直接把登录按钮做在输入框的上面，但有很多情况下，这经常满足不了需求。同时如果输入框特别多的情况下，点击输入时，当前输入框没被挡住，但是当前输入框下面的输入框却无法获取焦点，必须先把键盘收起，再去获取下面输入框焦点，这样用户体验也非常不好，那有什么办法呢？系统的adjustResize和adjustPan有什么区别，他们使用时的注意事项，有什么系统要求及蔽端呢？

03

jquery 与javascript 获取元素尺寸大小的对比

jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

03

iOS-屏幕适配实现（Autoresizing）

Autoresizing是苹果早期屏幕适配的解决办法，当时iOS设备机型很少、屏幕尺寸单一、APP界面相对简单，屏幕适配并没有现在这么复杂，所有的UI控件只要相对父控件布局就可以了，Autoresizing就是一个相对于父控件的布局解决方法

01

Android应用开发之线性布局

既然是线性排列，肯定就不仅只有一个方向，这里一般只有两个方向：水平方向和垂直方向。

02

深入详解iOS适配技术

iPhone自诞生以来，随着其屏幕尺寸不断的多样化，屏幕适配的技术一直在发展更新。目前，iOS系统版本已经更新到9.3，XCode的最新版本已经是7.3，仅iPhone历史产品的尺寸就已经有4种：3.5英寸、4.0英寸、4.7英寸、5.5英寸。最近，iPhone家族又诞生一款iPhoneSE，鉴于这款iPhoneSE的屏幕尺寸和iPhone5S的尺寸一模一样——同样是4.0英寸，广大iOS开发者可算是松了口气，不然iOS的屏幕尺寸真的是越来越让人眼花缭乱。按照时间顺序，屏幕适配是这样发展的：纯代码计算frame-> autoresizing(早期进行UI布局的技术，仅适用于约束父子控件之间的关系)->AutoLayout(iOS6/2012年、iPhone5被引入，比autoresizing更加高级，旨在替代autoresizing，可以设置任何控件之间的关系)->sizeClass(iOS8出现，用于解决越来越多的屏幕尺寸的适配问题)。在iPhone3gs时代，手机的屏幕尺寸有且只有一种，也就是3.5英寸。开发app的时候，根本不用考虑同一个视图在不同尺寸的屏幕上显示的问题。iOS开发者完全可以用纯代码的方式把一个控件的frame写死。后来apple公司推出了4.0英寸的iPhone5和iPhone5S，所以，针对于不同尺寸的屏幕，再把控件的frame写死就不可取了。（其实也不是不可取，很多iOS开发者做屏幕适配的时候不是用的autoresizing或autolayout，而是以代码的方式动态获取屏幕的尺寸，然后根据屏幕的尺寸来写死子控件的frame。使用这种方式你会在代码中无辜增加很多if...else... 的条件判断语句。另一种方式是获取到屏幕的尺寸后，按照控件和屏幕的比例来设置控件的frame，其本质上也是写死frame。所以这两种方式都不可取，毕竟将来会回出现越来越多的屏幕尺寸。从开发的角度，重复繁琐的代码会牵绊住开发者的进度；从程序设计角度，这样的设计思路不够高级，且日后不易于拓展和维护。）

07

Android TV开发总结【适配】

Android 的屏幕适配是指适配不同机顶盒 UI 框架层输出的分辨率和 dpi，而不是适配不同分辨率的电视机（电视机的适配交由机顶盒本身完成，和各个应用无关）

01

兼容 - 纯代码完美适配 iPhoneX

本文主要针对适配 iPhoneX列出一些关键点，仔细阅读可完美适配 iPhoneX，其中还有一些是适配 iOS11的，话不多少，开始正餐。

02

pygame-KidsCanCode系列jumpy-part5-屏幕滚动

接上回继续，方块不断向上跳动的过程中，从视觉上看，整个背景屏幕应该不断向下滚动，而且上方要不断出现新档板（否则就没办法继续向上跳了），这节我们将来实现这种效果，感觉好象很复杂，但实现起来其实很简单，只要对main.py略做调整：

03

1.2K Star开源一款精简,快速且高度可配置的看图软件,用过就不想卸载了

02

CSS布局(二)

添加 padding-bottom后，如上图所示，此时的父元素的高度就是高度最大的子元素的高度，即上面第一个子元素的高度

03

【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 )

上一篇博客【Android 屏幕适配】屏幕适配通用解决方案 ② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 ) 中 , 提出如果要实现将宽高为 720 x 1232 的设计稿 , 对应手机屏幕中除状态栏之外的布局 , 需要完成如下操作 :

01

AndroidAutoSize使用简介[通俗易懂]

今日头条屏幕适配方案终极版，一个极低成本的 Android 屏幕适配方案，项目地址：https://github.com/JessYanCoding/AndroidAutoSize

03

iOS新闻类App内容页技术探索

据相关数据显示，截至2017年底，中国手机新闻客户端用户规模达到6.36亿人，移动App已经成为新闻和内容传播的最重要途径之一。而伴随着行业的竞争和发展，App中的内容页在提升App品质、提升使用时长及提升用户黏性等方面，扮演着更为重要的角色，同时也面临着更大的挑战。

00

一篇文章带你了解JavaScript window screen

window.screen 对象可以不用窗口window前缀书写。下面用丰富的案例讲解相关内容。

01

FPS游戏：方框绘制算法分析

方框透视的原理是通过读取游戏中已知坐标数据，并使用一定算法将自己与敌人之间的距离计算出来，结合GDI绘图函数在窗体上直接绘制图形，直到现在这种外挂依然具有极强的生命力，原因就是其比较通用，算法固定并能够应用于大部分的FPS游戏中。接下来我们将具体分析计算方框的思路，以及实现这些方框绘制算法。

02

flutter 屏幕尺寸适配和字体大小适配的实现

现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，

03

浏览器-如何利用 Chrome 浏览器实现滚动截屏

作为前端工程师，有时需要将做到一半的网页发送给 PM 和 Designer 来获得他们的反馈。Mac 自带的截屏功能只能截取显示在屏幕上的内容，但是网页长度常常会超出屏幕高度，只依靠这个截图软件无法实现一次性的截取整个网页。

01

Android自定义控件ScrollView实现上下滑动功能

本文实例为大家分享了Android ScrollView实现上下滑动功能的具体代码，供大家参考，具体内容如下

02

Android SurfaceView onTouchEvent配合OpenCV显示

以前我们整体的介绍了利用SurfaceView调用系统的Camera显示图像，并且通过NDK OpenCV的方式进行图像处理，今天这篇我们就是来介绍一下，在SurfaceView中点击显示图像中的区域进行定位，方便我们手动调整图像的。最后完整的代码会在整个系列都做完后上传到GItHub中。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭